冒泡机制(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支持捕获)。
Last modification:April 20, 2018
If you think my article is useful to you, please feel free to appreciate