本机JavaScript等价于jQuery的on(事件、选择器、处理程序)
本机JavaScript等价于jQuery的on(事件、选择器、处理程序)
提问于 2022-05-18 11:18:20
我讨厌jQuery。不幸的是，它在我的一个最大的项目中使用了很多，每当我不得不处理它的时候，我都会畏缩。我目前正处于一个早就应该升级的JavaScript (并迁移到TypeScript)的过程中，有一段jQuery我不太确定如何最好地替换。
所讨论的方法将是jQuery的on(events [, selector] [, data] [, handler ])方法。它允许您在将任何匹配选择器的元素添加到DOM之前为选择器创建事件侦听器。就jQuery方法而言，这个方法还不错。
要替换它，我的第一个想法是使用这样的东西：
function on(event, selector, handler) {
addEventListener(event, ev => {
if (ev.target.matches(selector)) {
handler()
}
}
}在我看来，这看起来不太有效，我也不确定这是否是最好的替代方法。我的想法正确吗?如果是的话，最好的替代方法是什么？
Stack Overflow用户
发布于 2022-08-18 07:53:07
matches不会在所有情况下都起作用。例如，考虑下面的片段。在span中单击button元素不会触发处理程序。
function on(event, elem, selector, handler) {
elem.addEventListener(event, ev => {
if (ev.target.matches(selector)) {
handler()
}
})
}
on('click', document.querySelector('#test'), 'button', () => console.log('Clicked'));<div id="test">
<button>Click Me <i class="icon icon-something">→</i></button>
</div>
这可以通过将matches替换为closest来解决。我还更新了处理程序调用，将this设置为匹配的目标元素。
function on(event, elem, selector, handler) {
elem.addEventListener(event, ev => {
const target = ev.target.closest(selector);
if (target) {
handler.apply(target, arguments)
}
})
}
on('click', document.querySelector('#test'), 'button', function () { console.log('Clicked ' + this.tagName);});<div id="test">
<button>Click Me <i class="icon icon-something">→</i></button>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72288207
复制相关文章
相似问题
腾讯云开发者
