javascript的事件流模型都有什么?零基础入门_事件小白知识

事件流:当你在页面触发一个点击事件后,页面上不仅仅有一个元素响应该事件而是多个元素响应同一个事件,因为元素是在容器中的。事件发生的顺序就是事件流,不同的浏览器对事件流的处理不同。冒泡事件流:当触发一个节点的事件时,会从当前节点开始,依次触发其祖先节点的同类型事件,直到DOM根节点 。捕获事件流:当触发一个节点的事件时,会从DOM根节点开始,依次触发其祖先节点

javascript的事件流模型都有什么?零基础入门

事件流:当你在页面触发一个点击事件后,页面上不仅仅有一个元素响应该事件而是多个元素响应同一个事件,因为元素是在容器中的。事件发生的顺序就是事件流,不同的浏览器对事件流的处理不同。

javascript的事件流模型都有什么?零基础入门_事件小白知识

冒泡事件流:

当触发一个节点的事件时,会从当前节点开始,依次触发其祖先节点的同类型事件,直到DOM根节点 。

捕获事件流:

当触发一个节点的事件时,会从DOM根节点开始,依次触发其祖先节点的同类型事件,

知道当前节点自身 。

DOM事件流:

dom同时支持两种事件模型,但捕获性事件先开始,从document开始也结束于document,dom模型的独特之处在于文本也可以触发事件。

什么时候是事件冒泡?事件捕获?

当使用addEventListener绑定事件,第三个参数设为true时表示事件捕获,除此之外的所有事件均为事件冒泡。

阻止事件冒泡
①IE10之前,使用e.cancelBubble = true;

②IE10之后,使用 e.stopPropagation();

function myParagraphEventHandler(e) {
     e = e || window.event;     
     if (e.stopPropagation) {
           e.stopPropagation(); //IE10之后 
     } else {         
          e.cancelBubble = true; //IE10之前     
    } 
}

阻止默认事件
①IE10之前:e.returnValue = false;

②IE10之后:e.stopPropagation();

function eventHandler(e) {
   e = e || window.event;
   // 防止默认行为   
   if (e.preventDefault) {  
       e.preventDefault(); //IE10之外   
   }else { 
       e.returnValue = false; //IE10之前   
  } 
}
http://wanghi.cn
海计划公众号
感谢您的关注,博客维护中,请知悉~