冒泡机制(event)
当一个元素上的事件被触发的时候,比如说鼠标点击了一个按钮,同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡;这个事件从原始元素开始一直冒泡到DOM树的最上层。简言之:子元素事件被触动,父盒子的同样的事件也会被触动。
事件传播阶段
事件传播的三个阶段是:捕获、冒泡和目标阶段
事件捕获阶段:事件从最上一级标签开始往下查找,直到捕获到事件目标(target)。
事件冒泡阶段:事件从事件目标(target)开始,往上冒泡直到页面的最上一级标签。
目标阶段:目标正在被执行的阶段
冒泡顺序
- IE 6.0:
div -> body -> html -> document
- 其他浏览器:
div -> body -> html -> document -> window
- 不是所有的事件都能冒泡。以下事件不冒泡:`blur、focus、load、unload、onmouseenter
onmouseleave`
阻止冒泡
- w3c的方法是:(火狐、谷歌、IE11)
event.stopPropagation()
- IE10以下则是使用:
event.cancelBubble = true
- 兼容代码如下:
var event = event || window.event;
if(event && event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble = true;
}
addEventListenner(参数1,参数2,参数3)
- 调用者是:事件源。
- 参数1:事件去掉on 参数2 :调用的函数
- 参数3:可有可无。没有默认false。(false情况下,支持冒泡。True支持捕获)。