                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /DOM事件探秘

那么问题来了，因为浏览器有事件冒泡，那么同理的就有事件捕获咯。

那么问题来了，因为浏览器有事件冒泡，那么同理的就有事件捕获咯。如果在body与btn3都有事件，那么触发body事件同样会触发btn3事件咯？

yunsky0

2015-10-23

源自：DOM事件探秘 3-1

关注问题我要回答

1145

操作

收起

3 回答

逆光之羽回答被采纳 +3 积分
2015-10-24

晚上写的时候没仔细想....是在下逗逼了orz 忘了浏览器默认都是事件冒泡于是重新改过了

测试环境用的火狐，通过addEventListener第三个参数设为true改为捕获模式

<head>
</head>
<body>
    <div id="div" style="border:1px red solid">
        <input type="button" id="btn" value="按钮">
    </div>
    <script>
        var btn = document.getElementById("btn");
        var div = document.getElementById("div");
        btn.addEventListener('click',function(){
            alert('btn');
        },true);
        div.addEventListener('click',function(){
            alert('div');
        },true);
    </script>
</body>

结果点击父元素还是不会触发子元素的事件不过只试了onclick事件...

0 回复有任何疑惑可以回复我~

收起回答

yunsky0 提问者

非常感谢！

2015-10-24 回复有任何疑惑可以回复我~

发粪涂墙的游小鸡
2016-06-19

是不会触发的，为什么呢？首先你可以这样想象，点击btn3，事件从外面进入到目标点，从天而降的一个事件，经过body，找到目标点，这个分别是步骤一，事件捕获，外面到里面，然后步骤二，找到目标点，这个时候才是步骤三，事件冒泡。所以点击btn3的时候，如果body有点击事件，在捕获的时候经过它，冒泡也经过它，都能触发，但是，重点来了，注意听，步骤二，找到目标点，然后才冒泡，如果你是点击body，好了，从document找到body，找到了，它就冒着泡浮出水面了。然后了，再也没有然后了，这里根本就不关btn3的事了，谁叫不点你，还在那么里面，所以你就安静地待着。

1 回复有任何疑惑可以回复我~

收起回答

逆光之羽
2015-10-23

感觉不会吧，应该是到body层级就停止了吧，冒泡和捕获不是仅仅是触发事件的顺序相反么

试了下果然不会,body显示不明显换成div来测试了，想一想要是父元素触发事件子元素也会触发的话感觉会有各种问题

<head>
</head>
<body>
	<div onclick="alert('div')" style="border:1px red solid">
		<input type="button" onclick="alert('button')" value="按钮">
	</div>
</body>

0 回复有任何疑惑可以回复我~

收起回答

yunsky0 提问者

你知道哪里才会使用到事件捕获？

2015-10-23 回复有任何疑惑可以回复我~