javascript - 使用纯 Javascript 将事件绑定到元素

Question

我正在编写一个 API，不幸的是需要避免使用任何 jQuery 或 3rd 方库。事件究竟是如何通过 jQuery 绑定到元素的？

jQuery 示例：

$('#anchor').click(function(){
    console.log('anchor');
});

出于沮丧，我接近在元素上编写 onClick 属性，但我想了解 jQuery 事件和 DOM 元素之间的链接。

当标记本身未更改时，元素如何知道触发 jQuery 事件？他们如何捕获 DOM 事件并覆盖它？

我已经创建了自己的 Observer 处理程序，但不能完全理解如何将元素链接到 Observer 事件。

score 66 · Accepted Answer

这是一个快速的答案：

document.getElementById('anchor').addEventListener('click', function() {
  console.log('anchor');
});

每个现代浏览器都支持一个完整的 API，用于通过 JavaScript 与 DOM 交互，而无需修改 HTML。在这里查看一个很好的鸟瞰图：http: //overapi.com/javascript

score 10 · Accepted Answer

您通过 id 标识元素，在本例中为锚点，通过：

var el = document.getElementById('anchor');

然后你需要分配你的点击事件：

el[window.addEventListener ? 'addEventListener' : 'attachEvent']( window.addEventListener ? 'click' : 'onclick', myClickFunc, false);

最后，事件的功能类似于：

function myClickFunc()
{
    console.log('anchor');
}

如果您不需要与旧版浏览器和一系列浏览器兼容，您可以简化它或将其变成单线，但 jQuery 具有跨浏览器兼容性，并尽最大努力为您提供您正在寻找的功能尽可能多的旧浏览器。

2 回答 2