如何为addEventListener创建更短的等效项
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何为addEventListener创建更短的等效项相关的知识，希望对你有一定的参考价值。
我想像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);
};
答案
JQuery返回jQuery对象中包含的元素数组，在其原型中提供有用的方法。因此，简化，它的工作原理类似于下面的代码。最后一行是您希望将事件侦听器附加到元素的方式（如果我理解正确的话）。
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!"));<button>Click</button>另一答案
jQuery返回一个包装器对象，它暴露方法.on()，.attr()，.prop()等，而不是实际的htmlElement实例。所以，你可以做到的一种方法是做同样的事情。
另一种技术上可行的方法是修改HTMLElement类的原型：
HTMLElement.prototype.on = function(event, callback, capture) { ... };
但请注意，非常不推荐操作您自己没有创建的原型。它可以很容易地破坏预定义的行为，也许现在不是，但在未来的javascript版本中。
以上是关于如何为addEventListener创建更短的等效项的主要内容，如果未能解决你的问题，请参考以下文章
使用 android drawable layer ist 创建比其视图更短的边框
MySQL PDO 在 3 秒或更短的时间内创建和填充 1000 个小表？