腾讯云·社区
关于JS的事件捕获与冒泡
事件与事件流
事件，是文档或浏览器窗口发生的一些特定的交互事件。事件流，描述的是页面中接收事件的顺序。
默认情况下，事件使用冒泡事件流，不使用捕获事件流。
捕获与冒泡
- 事件捕获：执行顺序(
document->html->body->div) - 事件冒泡：执行顺序(
div->body->html->document) - IE < 9：只支持事件冒泡
- IE 9+|chrome|firefox|safari：
事件冒泡+事件捕获
阻止捕获与冒泡
event.stopPropagation()
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#outer {
display: block;
width: 300px;
height: 300px;
background-color: red;
}
#middle {
display: block;
width: 200px;
height: 200px;
background-color: green;
}
#inner {
display: block;
width: 100px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div id="container">
<div id="outer">
outer
<div id="middle">
middle
<div id="inner">
inner
</div>
</div>
</div>
</div>
<script>
var outer = document.getElementById('outer');
var middle = document.getElementById('middle');
var inner = document.getElementById('inner');
outer.addEventListener('click', function (event) {
console.log('outer-->事件捕获');
// 阻止事件捕获，内层不会再捕获到事件
// event.stopPropagation();
}, true);
middle.addEventListener('click', function (event) {
console.log('middle-->事件捕获');
}, true);
inner.addEventListener('click', function (event) {
console.log('inner-->事件捕获');
}, true);
inner.addEventListener('click', function (event) {
console.log('inner-->事件冒泡');
}, false);
middle.addEventListener('click', function (event) {
console.log('middle-->事件冒泡');
// 阻止事件冒泡，外层不会再捕获到事件
// event.stopPropagation();
}, false);
outer.addEventListener('click', function (event) {
console.log('outer-->事件冒泡');
}, false)
</script>
</body>
</html>本文参与腾讯云自媒体分享计划，欢迎正在阅读的你也加入，一起分享。
相关文章
扫码关注云+社区
领取腾讯云代金券
我来说两句