事件捕获的疑问
<style>
div {padding: 50px;}
#div1 {background: red;}
#div2 {background: blue;}
#div3 {background: green; position: absolute; top: 300px;}
</style>
<script>
window.onload = function() {
var oDiv1 = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
var oDiv3 = document.getElementById('div3');
function fn1() {
alert( this.id );
}
oDiv1.addEventListener('click', function() {
alert(1);
}, false);
oDiv1.addEventListener('click', function() {
alert(3);
}, true);
oDiv3.addEventListener('click', function() {
alert(2);
}, false);
//
}
</script>
</head>
<body>
<div id="div1">
<div id="div2">
<div id="div3"></div>
</div>
</div>
</body>
</html>
代码如上：当点击div2的时候是先弹出3，再弹出1的；但是直接点击div1的时候是先弹出1，再弹出3的。按照理解点击div1时应该和点击div2一样的弹出顺序啊？希望大神给予解答
拉丁的传说1回答
-
慕沐林林
因为事件触发是先捕获再冒泡的，所以点击div2时候是先3再1,。然后直接点击在元素上时，其实是相当于同时触发了捕获和冒泡，这个时候的顺序是根据你代码的绑定事件的先后顺序。
随时随地看视频慕课网APP
相关分类
JavaScript