事件冒泡
Posted mushitianya
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了事件冒泡相关的知识，希望对你有一定的参考价值。
<body>
<div id="div1">
<p id="p1">激活</p>
<p id="p2">取消</p>
<p id="p3">取消</p>
<p id="p4">取消</p>
</div>
<div id="div2">
<p id="p5">取消</p>
<p id="p6">取消</p>
</div>
</body>对于以上 html 代码结构，点击p1时候进入激活状态，点击其他任何p都取消激活状态，如何实现？
var p1 = document.getElementById('p1')
var body = document.body
bindEvent(p1, 'click', function (e) {
e.stopPropatation() // 注释掉这一行，来体会事件冒泡
alert('激活')
})
bindEvent(body, 'click', function (e) {
alert('取消')
})如果我们在p1 div1 body中都绑定了事件，它是会根据 DOM 的结构，来冒泡从下到上挨个执行的。但是我们使用e.stopPropatation()就可以阻止冒泡。
以上是关于事件冒泡的主要内容，如果未能解决你的问题，请参考以下文章