经过测试,当给目标元素均添加冒泡和捕获时,目标元素的事件触发顺序根据添加冒泡和捕获的顺序,而上级元素事件还是先在捕获阶段触发。
当给根元素均添加冒泡和捕获时,目标元素的事件触发顺序根据添加冒泡和捕获的顺序,而目标元素是在捕获阶段触发。
测试代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
body{
padding: 100px;
background-color: gray;
}
p{
width: 300px;
height: 300px;
background-color: indianred;
}
div{
padding:50px;
background-color: #67991d;
}
</style>
</head>
<body id="body">
<div id="div">
<p id="p">this is p</p>
</div>
<script type="text/javascript">
p.addEventListener('click',function () {
console.log('p冒泡阶段');
},false);
p.addEventListener('click',function () {
console.log('p捕获阶段');
},true);
body.addEventListener('click',function () {
console.log('body冒泡阶段');
},false);
body.addEventListener('click',function () {
console.log('body捕获阶段');
},true);
div.addEventListener('click',function () {
console.log('div冒泡阶段');
},false);
div.addEventListener('click',function () {
console.log('div捕获阶段');
},true);
</script>
</body>
</html>
点击p元素时,触发顺序:
body捕获阶段
div捕获阶段
p冒泡阶段
p捕获阶段
div冒泡阶段
body冒泡阶段