什么是js事件冒泡呢?简单来说就是事件从事件源逐级向上传递,这一机制就叫事件冒泡机制。打个比方就好像某个地方发生了一件什么大事,县长要报告给市长,市长又要报告给省长,省长最后再报告给中央,这样一级一级往上传递消息。那么在js中这种事件机制有什么影响呢?且看下面代码:
<div>
<p>
<span></span>
</p>
</div>
假如我给div、p和span标签各添加了一个点击事件,点击时分别弹出框弹出1、2、3。由于事件冒泡的影响,当我点击span元素的时候将依次弹出3、2、1。(可给3个元素设置不同的大小和背景色以保证点击的是span元素)这个应该很好理解。
有时我们不希望事件往上传递就可以用以下方法解决,
在W3c中,使用stopPropagation()方法
在IE下设置cancelBubble = true;
jquery中 return false;这就好像告诉浏览器,这件事情太小了,父元素不需要知道,你自己处理吧,这样事件传播就停止在了事件源这一级别。
与之相对的还有一种事件处理机制叫事件捕获,事件捕获就是从上往下查找。就好像下面发生什么事的话,命令也是一级一级往下传达的。
总之记住下面规律就可以
事件捕获可以理解为事件冒泡是底层发生事件需要向上级汇报,报告是一级一级往上传递;事件捕获是命令一级一级往下传达。
当你使用事件捕获时,父级元素先触发,子级元素后触发,即div先触发,p后触发。
事件冒泡
当你使用事件冒泡时,子级元素先触发,父级元素后触发,即p先触发,div后触发。