addEventListener如何在后台运行？ [英] How does addEventListener work under the hood?

问题描述

var elem=document.getElementById('mydiv');
elem.addEventListener('click',function(){...});

执行以上代码后， elem 为 HTMLDivElement 界面的实例。我的大问题是addEventListener（）方法的作用是什么。它在哪个DOM对象中注册侦听器以及它如何进行监听（它更改了这些DOM对象的哪些属性）。换句话说，我想知道 elem 如何得知侦听器的添加，它的哪些属性（所有这些属性都属于其原型链）会受到影响。例如，我知道Event.prototype具有关键属性，例如 type ， target ；但是我无法用 elem ...

After execution of the above code elem is an instance of HTMLDivElement interface. My big question is what exactly addEventListener() method does. In which DOM objects does it register the listener and how it does that(which properties of these DOM objects it changes). In other words, I'd like to know how elem is informed about the addition of a listener, which of its properties(all of them down to its prototype chain) are affected. For example I know that Event.prototype has crucial properties like type, target; however I cannot "connect" them with elem...

连接它们，我不想找到哪个事件监听器附加到上述DOM节点。我想知道内部程序。

I do not want to find which event listeners are attached to the above DOM node. I want to know the inner procedures.

谢谢

推荐答案

执行上述代码后，elem是 HTMLDivElement 接口的实例。我的大问题是 addEventListener（）方法的作用是什么。

After execution of the above code elem is an instance of HTMLDivElement interface. My big question is what exactly addEventListener() method does.

它在哪个DOM对象中注册侦听器

In which DOM objects does it register the listener

在调用 addEventListener 的DOM元素上。 （当然，子元素上的事件可能会冒出来）。

On the DOM element on which addEventListener was called. (Of course, events on sub-elements could bubble up).

以及它是如何做到的（这些DOM对象的属性会改变）

and how it does that (which properties of these DOM objects it changes)

这是内部实现的详细信息。它不会更改DOM对象的用户可见属性。

How it does that is an internal implementation detail. It changes no user-visible properties of the DOM object.

换句话说，我想知道如何告知elem有关添加侦听器的信息。

In other words, I'd like to know how elem is informed about the addition of a listener

不是。

它的哪些属性（全部下降）

which of its properties (all of them down to its prototype chain) are affected

都不受影响。

例如我知道Event.prototype具有至关重要的属性，例如类型，目标；但是我不能连接它们带有元素...

For example I know that Event.prototype has crucial properties like type, target; however I cannot "connect" them with elem...

这些是 Event 的属性，与 elem 。

这篇关于addEventListener如何在后台运行？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！