javascript - 我可以确定每个事件处理程序都将完成执行吗？

Question

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

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

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

Answer 1

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

试试这个:

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.
});

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

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