7

我从一个空白页面开始。如果我跑，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哪里？

4

2 回答 2

4

它存储在Event侦听器的实际列表（数组）中body。

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

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

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

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

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

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

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

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

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

于 2012-10-31T10:51:07.920 回答
1

.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。

于 2012-10-31T11:15:53.873 回答