事件处理程序如何在 javascript 中工作？

Question

函数执行完成并且永远不会被再次调用，但我仍然可以访问其中的事件处理程序

(function () {
 const header = document.querySelector('h1');
 header.style.color = 'red';
 header.addEventListener('click', function () {
  this.style.color = this.style.color === 'blue' ? 'red' : 'blue';
 });
})();

Answer 1

在您的 JavaScript 代码中，您将事件处理程序附加到 DOM 中的 object。

由于元素没有消失，在你的 IIFE 运行之后，处理程序仍然附加到它，即使你的header变量不再存在。

 document.querySelector("h1").click() console.log("color after first click: " + document.querySelector("h1").style.color); (function () { const header = document.querySelector('h1'); header.style.color = 'red'; header.addEventListener('click', function () { this.style.color = this.style.color === 'blue'? 'red': 'blue'; }); })(); document.querySelector("h1").click() console.log("color after second click: " + document.querySelector("h1").style.color) document.querySelector("h1").click() console.log("color after third click: " + document.querySelector("h1").style.color)

 <h1>Test</h1>

如果您通过onclick属性附加事件侦听器，您可以更好地看到这一点，因为之后无法轻松访问通过addEventListener添加的事件：

 console.log(document.querySelector("h1").onclick); // -> null (function () { const header = document.querySelector('h1'); header.style.color = 'red'; header.onclick = function () { this.style.color = this.style.color === 'blue'? 'red': 'blue'; } })(); document.querySelector("h1").click() console.log(document.querySelector("h1").onclick) // -> your function

 <h1>Test</h1>

如果要从元素中删除事件侦听器，则必须引用您附加的 function，否则removeEventListener方法将不起作用。