小历史:
事件传播的不同还要从早先的两家浏览器巨头说起,网景和IE为了能争夺市场,互相使用相反的技术,当网景使用事件捕获流的时候,IE则使用事件冒泡流。后来W3C为了能规范规定,直接折中,当事件发生时,先发生向下传播,当到底了以后再次使用事件冒泡,逐渐的冒泡到根节点。
事件传播分三个阶段:
DOM事件流(event flow )存在三个阶段:事件捕获阶段、处于目标阶段、事件冒泡阶段。
- 在事件捕获阶段,事件从document对象沿着文档树向下传播给目标节点。如果目标的任何一个祖先注册了捕捉事件句柄,那么在事件传播的过程中,就会运行这些句柄(IE10及以下不支持捕获型事件)。
- 目标阶段发生在目标节点自身,这与0级事件模型提供的事件处理方法类似。
-
事件冒泡阶段,在这个阶段,事件将从目标元素向上传播回(像冒泡)Document对象的文档层次(IE8 及以下没有捕获阶段)。
无论是事件捕获还是事件冒泡,它们都有一个共同的行为,就是事件传播,它就像一跟引线,只有通过引线才能将绑在引线上的鞭炮(事件监听器)引爆,试想一下,如果引线不导火了,那鞭炮就只有一响了!!!
dom标准事件流的触发的先后顺序为:先捕获再冒泡,即当触发dom事件时,会先进行事件捕获,捕获到事件源之后通过事件传播进行事件冒泡。
事件监听
与这两个事件密切相关的是addEventListener、attachEvent:
addEventListener(event, listener, useCapture)
参数定义:
event---(事件名称,如click,不带on)
listener---事件监听函数
useCapture---是否采用事件捕获进行事件捕捉,默认为false,即采用事件冒泡方式
addEventListener在 IE11、Chrome 、Firefox、Safari等浏览器都得到支持。
attachEvent(event,listener)
参数定义:
event---(事件名称,如onclick,带on)
listener---事件监听函数。
attachEvent主要用于IE浏览器,并且仅在IE10及以下才支持,IE11已经不在使用这个方法。
阻止事件冒泡
w3c的方法是e.stopPropagation(),IE则是使用e.cancelBubble = true
evt.stopPropagation();
evt.cancelBubble = true;
在处理浏览器兼容问题时,可以这样:
if(evt.stopPropagation){
evt.stopPropagation();
}else{
evt.cancelBubble = true;
}
还有一种以阻止默认事件的方式去阻止冒泡行为
return false
区别
event.stopPropagation();
事件处理过程中,阻止了事件冒泡,但不会阻击默认行为return false;
事件处理过程中,阻止了事件冒泡,也阻止了默认行为event.preventDefault();
它的作用是:事件处理过程中,不阻击事件冒泡,但阻击默认行为
————愿你在迷茫时,坚信你的珍贵,爱你所爱,行你所行,听从你心,无问西东。