addEventListener 在幕后如何工作？

Question

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

执行完上面的代码后elem就是一个HTMLDivElement接口的实例。我的大问题是 addEventListener() 方法到底做了什么。它在哪些 DOM 对象中注册了侦听器以及它是如何注册的（它更改了这些 DOM 对象的哪些属性）。换句话说，我想知道如何知道elem添加了一个监听器，它的哪些属性（所有这些属性都影响到它的原型链）。例如，我知道 Event.prototype 具有诸如type, 之类的关键属性target；但是我无法“连接”它们elem......

我不想找到哪些事件侦听器附加到上述 DOM 节点。我想知道内部程序。

谢谢

Answer 1

执行上述代码后，elem 就是HTMLDivElement接口的一个实例。我最大的问题是addEventListener()方法到底是做什么的。

它在哪些 DOM 对象中注册监听器

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

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

它如何做到这一点是一个内部实现细节。它不会更改 DOM 对象的用户可见属性。

换句话说，我想知道 elem 是如何获知监听器的添加的

它不是。

它的哪些属性（所有属性都到其原型链）受到影响

没有一个。

例如，我知道 Event.prototype 具有关键属性，例如类型、目标；但是我无法将它们与 elem“连接”...

这些是 的属性Event，与 无关elem。