js 代码实现事件冒泡
时间: 2023-10-04 12:14:11 浏览: 38
事件冒泡是指当一个元素触发某个事件时,该事件会在从子元素到父元素的方向上逐级传递,直到被处理或者传递到文档的根节点为止。在JS代码中,可以通过编写事件处理函数来实现事件冒泡。
例如,以下是一个HTML页面上的一个嵌套结构:
```
<div class="parent">
<div class="child">
<button>Click me</button>
</div>
</div>
```
当用户点击了按钮时,可通过以下JS代码实现事件冒泡:
```
document.querySelector('.parent').addEventListener('click', function(event) {
console.log('Clicked parent');
});
document.querySelector('.child').addEventListener('click', function(event) {
console.log('Clicked child');
event.stopPropagation();
});
document.querySelector('button').addEventListener('click', function(event) {
console.log('Clicked button');
});
```
当用户点击按钮时,会先触发按钮的事件处理函数,输出“Clicked button”,然后事件继续向上冒泡到子元素的事件处理函数,输出“Clicked child”,但因为调用了`event.stopPropagation()`方法阻止事件继续冒泡到父元素,所以不会触发父元素的事件处理函数。最后,事件终止于文档的根节点。