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

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

jQuery示例：

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

出于失望，我即将在元素上编写onClick属性，但我想了解jQuery事件和DOM元素之间的联系

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

我已经创建了自己的观察者处理程序，但无法完全理解如何将元素链接到观察者事件。

下面是一个快速答案：

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

---

每个现代浏览器都支持通过JavaScript与DOM交互的完整API，而无需修改HTML。请参见此处，以获得一个非常好的鸟瞰视图：

您通过id标识元素，在本例中，通过以下方式确定锚点：

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

然后，您需要分配单击事件：

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

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

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

---

如果不需要与较旧的浏览器和一系列浏览器兼容，您可以简化它或将其转换为一行程序，但是jQuery具有跨浏览器兼容性，并尽最大努力在尽可能多的旧浏览器中为您提供所需的功能。

您可以阅读更多关于

addEventListener

的信息，请向下滚动到“旧版Internet Explorer和attachEvent”了解IE关于隐藏元素的信息？