事件捕获/冒泡:我们点击一个span,我可能就想点击一个span,事实上他是先点击document,然后点击事件传递到span的,而且并不会在span停下,span有子元素就会继续往下,最后会依次回传至document。
事件冒泡即由最具体的元素(文档嵌套最深节点)接收,然后逐步上传至document
事件。
捕获会由最先接收到事件的元素然后传向最里边(我们可以将元素想象成一个盒子装一个盒子,而不是一个积木堆积)。
简单的就是说捕获时由绑定元素向内便利子元素触发事件;
冒泡就是有绑定元素向外便利父元素触发事件;
但是有些浏览器不支持捕获只支持冒泡;
例如:
点我
再点我
$("#we").click(function(){
alert (123);
});
按理说:当点击蓝色区域时会出现警示框,由于事件捕获,当点击红的区域时也会出现,但是由于浏览器的原因点击红色区域不会出现绑定事件;
$("#id").click(function(){
alert (123);
});
当点击红色区域时出现警示框,由于事件冒泡所以当点击蓝色区域时仍然会弹出警示框;但是我们在写代码的时候往往不需要时间的冒泡所以我们要阻止事件冒泡;
$('#id').click(function(){
alert('id');
})
$("#we").click(function(event){
event.stopPropagation(); //阻止事件向外冒泡;
});