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

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它存储在 的实际侦听器列表（数组）中body。

元素中有一个用于其事件侦听器的函数引用列表。这些引用不在 DOM 中。触发事件时，浏览器必须遍历所有适当的元素来查找这些引用并按顺序运行它们。

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

继续...onclick仅限于 DOM 中的一个值或单个 javascript 字符串。实际没有注册。所以，不是一个实际的事件监听器。这里的 DOM 有点像垫片，它支持字符串onclick作为事件运行。这样当事件被触发时这个字符串也会运行。通过浏览器，在正确的时间，神秘地。以一种迂回的方式，可以说这是 DOM 一般功能的一部分，它填充了 HTML 中的所有内嵌文本，这样它就可以通过document. 但通常，它们只是存储为字符串而不是树中的实际对象。这可能是 DOM 如此 foobar 的众多原因之一。

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

• 有倍数
• 将它们作为对象访问
• 随意添加和删除
• 选择事件传播方案
• 在运行时控制事件传播本身

• 让事件在第一次运行后自动删除

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

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

这个问题可能会阐明一些... addEventListener 与 onclick