Question

我想像jQuery一样为addEvenTListener创建一个简短的函数。我有选择和事件监听器的单独功能。但我希望能够使用$(selector).on代替on(event, elem, callback, capture)。我怎样才能做到这一点？

function $ (selector, scope) {
    scope = scope ? scope : document;
    return   scope.querySelector(selector);
};

var on = function (event, elem, callback, capture) {

    if (typeof (elem) === 'function') {
        capture = callback;
        callback = elem;
        elem = window;
    }
    capture = capture ? true : false;
    elem = typeof elem === 'string' ? document.querySelector(elem) : elem;
    if (!elem) return;
    elem.addEventListener(event, callback, capture);
};

Answer 1

jQuery返回一个包装器对象，它公开方法.on()，.attr()，.prop()等，而不是实际的HTMLElement实例。所以，你可以做到这一点的一种方法是做同样的事情。

另一种技术上可行的方式是修改HTMLElement类的原型：

HTMLElement.prototype.on = function(event, callback, capture) { ... };

但请注意，操纵您自己未创建的原型非常不推荐。它可以很容易地破坏预定义的行为，也许现在不是，但在未来的JavaScript版本中。

Answer 2

JQuery返回jQuery对象中包含的元素数组，在其原型中提供有用的方法。因此，简化，它的工作原理类似于下面的代码。最后一行是您希望将事件侦听器附加到元素的方式（如果我理解正确的话）。

＆＃13;

function $(selector, scope){
  let z = Object.create($.prototype);
  z.e = (scope || document).querySelector(selector);
  return z;
}

$.prototype.on = function(event, callback, capture){
  return this.e.addEventListener(event, callback, capture);
}

$("button").on("click", ()=>console.log("Clicked!"));

＆＃13;

<button>Click</button>

＆＃13;

Answer 3

Node.prototype.listen = Node.prototype.addEventListener;

创建别名或新引用。

//示例

el.listen('click', function(){
   // etc.
})

如何为addEventListener创建更短的等效项

3 个答案: