несколько элементов щелкните событие в JavaScript - как JQuery

Question

У меня есть функция, которая работает и выглядит следующим образом:

var $$ = function(selector, context) { 
    context = context || document; 
    var elements = context.querySelectorAll(selector); 
    return Array.prototype.slice.call(elements); 
} 

// My function 
var myFunction = function() { 
    $$('.my-selector').forEach(function(element) { 
     element.addEventListener('click', function(e){ 
      console.log('Do something'); 
     }); 
    }); 
} 

Я предпочел бы он больше похож JQuery:

// My function 
var myFunction = function() { 
    $('.my-selector').click(function(e) { 
     console.log('Do something'); 
    }); 
} 

Я могу» t выяснить, как это сделать. Есть идеи?

(Я хочу, чтобы мой код, чтобы быть независимым от рамок, так что я не хочу, JQuery)

Answer 1

Solution1: с вашей собственной обертке: Скрипач link

var $$ = function(selector, context) { 
    context = context || document; 
    var elements = context.querySelectorAll(selector);  
    var wrapper = function(elem){ 
     var element = elem; 
     this.click = function(cb){ 
     element.forEach(function(el){ 
      el.addEventListener('click', function(e){ 
      cb.apply(element,[e]); 
      }); 
     }); 
     }; 
    }; 

    return new wrapper(Array.prototype.slice.call(elements)); 
} 


$$("#test").click(function(e){ 
console.log("Do something:"+e.type); 
}); 

Solution 2 непосредственно связывания нативный элемент: Fiddler link

var $$ = function(selector, context) { 
    context = context || document; 
    var elements = Array.prototype.slice.call(context.querySelectorAll(selector));  
    elements.click = function(cb){ 
     elements.forEach(function(el){ 
      el.addEventListener('click', function(e){ 
       cb.apply(elements,[e]); 
      }); 
     });  
     }; 

    return elements; 
} 

$$("#test").click(function(e){ 
console.log("Do something:"+e.type); 
});