前端dom事件触发过程

韩雪冰原创2024年1月8日...大约 1 分钟

前端dom事件触发过程

<div id="g-parent">
	<div id="parent">
		<div id="child">
		</div>
	</div>
</div>

前端事件触发过程会先经过捕捉，在捕捉到某一具体dom后开始冒泡向父元素传播。

这里有两个方法需要熟悉下

stopPropagation：停止冒泡或者捕捉（当定义事件回调第三个参数为true, addEventListener(type, listener, useCapture)）

stopImmediatePropagation：同上，只不过是立即停止，例如：当click事件被多个不同的listener函数订阅。其中一个listener函数内执行了stopImmediatePropagation，则当前click事件队列后面的listener函数不会再执行。

再提事件委托

借助冒泡机制，将原本要添加到多个子容器上的事件添加到父容器上

<!DOCTYPE html>
<html lang="en">
<head> 
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul id="ul">
        <li>a</li>
        <li>b</li>
        <li>c</li>
        <li>d</li>
        <li>e</li>
    </ul>
    <script>
        let lis = document.querySelectorAll('li')
        lis.forEach((li)=>{
            li.addEventListener('click',()=>{
                console.log(li.innerText);
            })
        })
    </script>
</body>
</html>

如果我们要在ul中的每个li上添加点击事件，按照传统方法，我们可以先获取到每个li，再遍历添加点击事件。

但是我们按照事件委托的做法有以下好处：

只需要绑定一个事件到ul上，占用的内存更小
可以为动态添加的元素监听事件，不需要每添加一个元素就重新绑定一次

昵称

邮箱

网址

按正序
按倒序
按热度

前端dom事件触发过程

前端dom事件触发过程

预览: