使用纯 Javascript 将事件绑定到元素答案

【问题标题】：Bind event to element using pure Javascript使用纯 Javascript 将事件绑定到元素
【发布时间】：2013-07-23 03:00:53
【问题描述】：

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

jQuery 示例：

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

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

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

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

【问题讨论】：

【解决方案1】：

这是一个快速的答案：

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

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

【讨论】：

你可以在这里阅读更多关于addEventListener developer.mozilla.org/en-US/docs/Web/API/… 向下滚动到“旧版 Internet Explorer 和 attachEvent” 了解 IE
隐藏元素呢？

【解决方案2】：

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

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

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

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

最后，事件的功能是这样的：

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

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

【讨论】：