Question

我想将点击事件处理程序附加到我无法控制的页面中的所有元素（例如 - stackoverflow主页）。通过为每个元素分配点击处理程序来捕获点击是一项繁琐的工作。所以我决定这样做：

window.addEventListener("click", function (e) {
      //code
});

是否保证我的事件处理程序在发生使元素无法访问的事情之前完成执行，例如元素自己的点击处理程序从DOM中删除其父项？

Answer 1

是的，除非您尝试标记已删除的元素触发它或发生其他类型的错误，否则该事件将完成。这是DOM event delegation的基本示例。

Answer 2

是。事件处理程序在页面中同步运行。但是，如果删除元素，则会立即从DOM树中删除该元素。在事件处理程序代码完成之前，您不会在浏览器中看到任何更改，但节点不会在那里。但是，从页面中删除元素不会阻止事件处理程序执行。

试试这个：

＆＃13;

document.querySelector('#id1').addEventListener('click', function() {
  console.log (this.parentNode); // the DIV node
  this.parentNode.parentNode.removeChild(this.parentNode); // remove the DIV
  console.log(document.querySelector('#id1')); // null. Node no longer in the DOM.
  console.log(this.parentNode); // though detached from the DOM, the object still exists
                                // and has a parent.
  var acc = 1;                        
  for (var i = 0; i < 1000000; i++) {
    acc += 2 * i;
  }
 
  alert(acc);
  
  // though not in the DOM, the h2 is still visible in the page, and the browser is frozen, until the loop finishes and the alerts disappers.
});

＆＃13;

<div>
 <h1 id="id1">Click here</h1>
</div>

＆＃13;

如您所见，当您单击h2元素时，它将从DOM中删除（如控制台中所示）。但是，在警报窗口消失之前，它仍然可见。如果不在Web worker中完成JavaScript代码执行，则会阻止呈现。

我能确定每个事件处理程序都能完成执行吗？

2 个答案: