使用纯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可以实现跨浏览器兼容性,并尽力为您提供所需的功能.很多旧的浏览器都可以.