JS中事件执行机制是如何深入剖析的？

本文共计1706个文字，预计阅读时间需要7分钟。

本篇文章通过分析一段代码的打印顺序，深入探讨了JavaScript中事件执行机制，希望能对大家有所帮助！

前期时间一道笔试题，有点迷惑。今天我们来分析一下JS的事件执行机制。

在JavaScript中，事件执行机制主要涉及到事件冒泡和事件捕获两个阶段。当一个事件发生时，它会从最深的节点开始，逐级向上传播到最外层节点，这个过程称为事件冒泡。与之相反，事件捕获则是从最外层节点开始，逐级向下传播到最深的节点。

以下是一个简单的例子：

javascriptdocument.body.addEventListener('click', function() { console.log('body click');});

document.addEventListener('click', function() { console.log('document click');});

window.addEventListener('click', function() { console.log('window click');});

在这个例子中，当点击document时，事件会按照以下顺序执行：

1. window click

2.document click

3.body click

这是因为事件捕获阶段会先执行，然后才是事件冒泡阶段。

此外，JavaScript还提供了事件委托（Event Delegation）的概念。事件委托利用了事件冒泡的原理，将子元素的事件监听器绑定到父元素上，从而提高事件监听器的性能。