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');
    });
}

我不知道该怎么做。有什么想法吗？

（我希望我的代码独立于框架，所以我不想jQuery）

Answer 1

解决方案 1：使用您自己的包装器：Fiddler 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);
});

方案二直接绑定原生元素：Fiddlerlink

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);
});

javascript 中的多个元素单击事件 - 如 jQuery

Multiple elements click event in javascript - like jQuery

javascript

jquery

click

selector