JS事件冒泡|极客笔记

JS事件冒泡

在JavaScript中，事件冒泡是一种事件传播机制，即当一个元素上发生了某个事件（比如点击事件），该事件将会沿着DOM树向上冒泡，直到到达根元素为止。这意味着如果你在一个子元素上触发了某个事件，父元素上也会相应地触发同样的事件。理解事件冒泡对于正确处理事件是非常重要的。

事件冒泡机制

事件冒泡是DOM事件传播的一种方式，它让子元素的事件传播到父元素，并且一直传播到最外层的祖先元素。在触发事件后，事件会从最内层的元素一直向上传播直到最外层的元素。

举个示例，假设我们有如下的HTML结构：

<div id="parent">
    Parent Element
    <div id="child">
        Child Element
    </div>
</div>

如果我们在子元素child上点击鼠标，会发生什么呢？事件冒泡机制让这个点击事件会一直向上冒泡到父元素parent上。

如何阻止事件冒泡

有时候我们并不希望事件冒泡到父元素，这时候可以使用event.stopPropagation()方法来阻止事件冒泡。

下面是一个示例，当点击子元素时，阻止事件冒泡到父元素：

<div id="parent">
    Parent Element
    <div id="child">
        Child Element
    </div>
</div>

<script>
    const parent = document.getElementById('parent');
    const child = document.getElementById('child');

    parent.addEventListener('click', function(event) {
        alert('Parent Element Clicked');
    });

    child.addEventListener('click', function(event) {
        event.stopPropagation();
        alert('Child Element Clicked');
    });
</script>

在这个示例中，当点击子元素child时，只会触发子元素的点击事件，并且父元素的点击事件不会被触发。

事件委托和事件冒泡

事件委托是基于事件冒泡的，它允许您将事件处理程序附加到一个共同的祖先元素，而不是为每个后代元素都附加一个事件处理程序。

这种技术有很多好处，比如减少内存消耗、提高性能、简化代码等。通过事件委托，我们可以动态添加/删除元素而无需重新绑定事件处理程序。

下面是一个事件委托的示例：

<ul id="list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

<script>
    const list = document.getElementById('list');

    list.addEventListener('click', function(event) {
        if (event.target.tagName === 'LI') {
            alert(`You clicked on ${event.target.innerText}`);
        }
    });
</script>

在这个示例中，我们将点击事件监听器绑定到ul元素上，当点击列表项li时，会触发事件冒泡，从而通过判断点击的目标元素来做出相应的处理。