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

Question

我正在编写API，遗憾的是需要避免使用任何jQuery或第三方库。事件究竟是如何通过jQuery绑定到元素的？

jQuery示例：

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

我接近于在挫折中编写onClick属性，但我想了解jQuery事件和DOM元素之间的联系。

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

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

Answer 1

这是一个快速回答：

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

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

Answer 2

您可以通过ID识别元素，在本例中为锚点：

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

然后您需要指定点击事件：

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

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

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

如果您不需要与旧浏览器和一系列浏览器兼容，您可以简化它或将其转换为单行，但jQuery可以实现跨浏览器兼容性并尽力为您提供所需的功能适用于尽可能多的旧版浏览器。