javascript - 如何将 jQuery 事件处理程序转换为纯 JavaScript

Question

我曾经有过使用以下代码:

$(document).on('click', 'a[href^="http"]', () => {});

拦截链接点击。由于难以解释的原因，我必须在加载 jQuery 之前将此代码移至某处。我怎样才能用纯 JavaScript 编写这段代码？

Answer 1

根据上面的注释，您可以使用 vanila JavaScript 将上面的事件绑定(bind) jQuery 代码转换为下面的内容，

var links = document.querySelector('a[href^="http"]');
links.forEach(function(link) {
    button.addEventListener("click",function(e){
       // handling logic
    }, false);
} )

上面的代码将事件处理程序绑定(bind)到每个 a 元素，这可能会很昂贵。

创建事件委托(delegate)

向文档添加事件处理程序并查看目标是否是您想要的链接，

document.addEventListener("click", function(e) {
    // check the target has an attribute of `a[href^="http"]`
    if(e.target && e.target.nodeName == "a") {

    }
});

上面的代码使用事件冒泡来捕获文档内的点击事件。