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

I'm writing an API and unfortunately need to avoid any jQuery or 3rd party libraries. How exactly are the events bound to elements through jQuery?

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

jQuery example:

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

I'm close to writing a onClick attribute on the element out of frustration, but I would like to understand the link between the jQuery event and DOM element.

我很接近在元素上编写一个onClick属性,但是我想理解jQuery事件和DOM元素之间的联系。

How exactly does the element know to fire a jQuery event when the markup itself is not changed? How are they catching the DOM event and overriding it?

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

I have created my own Observer handler but cant quite understand how to link the element to the Observer events.

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

2 个解决方案

#1

Here's a quick answer:

这是一个快速回答:

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

Every modern browser supports an entire API for interacting with the DOM through JavaScript without having to modify your HTML. See here for a pretty good bird's eye view: http://overapi.com/javascript

每个现代浏览器都支持整个API,以便通过JavaScript与DOM交互,而无需修改HTML。请看这里的鸟瞰图:http://overapi.com/javascript

#2

You identify the element by id, in this case anchor, by:

您可以通过id识别元素,在本例中为锚点,通过:

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

Then you need to assign your click event:

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

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

And finally, the event's function would be something like:

最后,事件的功能将是这样的:

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

You could simplify it or turn it into a one-liner if you do not need compatibility with older browsers and and a range of browsers, but jQuery does cross-browser compatibility and does its best to give you the functionality you are looking for in as many older browsers as it can.

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

#1