使用纯JavaScript将事件绑定到元素

Question

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

jQuery示例：

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

我感到非常沮丧，几乎要在元素上编写一个 onClick 属性，但我想了解 jQuery 事件和 DOM 元素之间的关联。

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

我已经创建了自己的观察者处理程序，但不太明白如何将元素与观察者事件联系起来。

- Wancieho

Answer 1

这里是一个快速回答：

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

每个现代浏览器都支持完整的API，可以通过JavaScript与DOM进行交互，而无需修改HTML。这里提供一个相当不错的概览：http://overapi.com/javascript

- Dan Tao

---

你可以在这里阅读关于 addEventListener 的更多信息：https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener 请向下滚动到“旧版 Internet Explorer 和 attachEvent”了解 IE<9 的支持情况。 - vsr

隐藏元素怎么办？ - user924

Answer 2

你可以通过id来识别元素，例如这里的anchor，方法如下：

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

然后你需要给你的点击事件分配一个任务：

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

最后，事件的函数可能是这样的：

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

如果您不需要与旧浏览器兼容并覆盖多种浏览器，则可以将其简化或转换为一行代码，但是jQuery具有跨浏览器兼容性，并尽其所能在尽可能多的旧浏览器中提供您正在寻找的功能。

- txpeaceofficer09