Question

我从空页开始。如果我运行document.body.onclick，我会null。如果我应用以下代码：

document.body.onclick = function() { return "Click"; };

我运行function() { return "Click"; }时得到document.body.onclick。那讲得通！但是当我跑步时

document.body.addEventListener("click", function() { return "Click"; });

document.body.onclick仍为null，但运行"Click"时输出为document.body.click()。

所以我的问题是，使用addEventListener时存储的功能在哪里？

Answer 1

它存储在Event的{{1}}个侦听器的实际列表（数组）中。

元素的事件侦听器中包含一系列函数引用。这些引用不在DOM中。触发事件时，浏览器必须通过所有相应的元素运行，以查找这些引用并按顺序运行它们。

无论如何......在DOM看不到的背景中有很多事情发生。整个事件系统就是其中之一。好吧，整个Javascript引擎本质上和当前加载页面的大对象树一样，都存储在神秘的内存中。通常使用body和document接口访问它们，就像DOM一样。但正确注册的事件将存储在存储在内存中的大对象树中，这与DOM不同。只是密切相关。我将DOM视为这个大对象树和HTML本身之间的接口或中间人。

继续前进... window仅限于一个值或只是坐在DOM中的单个javascript字符串。实际上没有注册。所以，不是一个真正的事件监听器。在这里，DOM有点像垫片，因为它支持onclick字符串作为事件运行。因此，当触发事件时，此字符串也会运行。通过浏览器，在合适的时间，神秘。在一个回合的过程中，可以说这是DOM一般的工作的一部分，它在HTML中填充所有内嵌文本，因此可以通过onclick访问它。但通常，它们只是存储为字符串而不是树中的实际对象。这可能是DOM如此蓬勃发展的众多原因之一。

document实际上将其注册为真实事件，因此您可以：

有倍数
将其作为对象访问
随意添加和删除
选择事件传播方案
在运行时控制事件传播
首次运行后自动删除事件

......以及其他一些功能。

它们是同一事件的两种不同的事件监听器。一个是使用addEventListenener时的完整事件监听器。另一个是坐在DOM中的一串文本，浏览器将在“正确的时间”运行，但不是实际的完整事件监听器。

这个问题可能会有所启发...... addEventListener vs onclick

Answer 2

.onclick =和.addEventListener之间的主要区别在于.onclick设置了一个事件处理程序来替换现有的事件处理程序。而不是.addEventListener向DOM元素添加多个事件处理程序。 .addEventListener是添加事件处理程序的现代方法。存储它们的位置，我不知道，但不在onclick中，因为onclick保留单个值，而不是事件处理程序数组。你可以在这里阅读更多相关信息：

https://developer.mozilla.org/en-US/docs/DOM/element.addEventListener#Older_way_to_register_event_listeners

http://www.w3.org/TR/DOM-Level-3-Events/#events-DocumentEvent-createEvent

所以答案是，您无法通过获取.addEventListener的值来onlick添加事件处理程序。

用addEventListener存储的事件在哪里存储？

2 个答案: