当我们使用js时,经常会遇到事件传播流程的问题,下面我说一下我的观点。
在js触发某个事件时会相应生成一个事件对象,而这个事件对象则会根据DOM事件流的方向进传递,而传递的顺序如下图所示:
事件对象会随着DOM事件流从Window依次向下,最终传递给事件目标。但是在这个过程开始之前,事件对象的传递路径需要先被确定下来。一旦确定了传播路径,事件对象就会经过一个或多个事件阶段。有三个事件阶段:捕获阶段,目标阶段和冒泡阶段。
这个传递路径是一个有序的列表,里面包含了传递到事件目标需要经过的节点。而传递路径反映了文档的树结构。列表里面的最后一项就是事件目标,列表里面先于它的项指向目标的祖先节点,它的上一项指向目标的父节点。
一旦传递路径被确定了,事件对象就可以经历一个或者多个事件阶段。通常有三个阶段:捕获阶段,目标阶段,冒泡阶段。某些阶段可能会被跳过,如果浏览器不支持,或者事件对象的传播被停止了。例如,如果把cancelBubble
设置为true
,冒泡阶段将会被跳过,或者stopPropagation()
方法在传递之前就被调用的话,之后所有的阶段都会被跳过。
- 捕获阶段:事件对象从目标的祖先节点Window开始传播直至目标。
- 目标阶段:事件对象传递到事件目标。如果事件的type属性表明后面不会进行冒泡操作,那么事件到此就结束了。
- 冒泡阶段:事件对象以一个相反的方向进行传递,从目标开始,到Window对象结束。
事件捕获和事件冒泡属于两个相反的过程,这里可以有一个我感觉十分恰当的比喻,当你把一个可以漂浮在水面上的物品,使劲向水里砸下去,它会首先有一个下降的过程,这个过程就可以理解为从最顶层向事件发生的最具体元素(目标点)的捕获过程;之后由于浮力大于物体自身的重力,物体会在到达最低点( 最具体元素)之后漂浮到水面上,这个过程相对于事件捕获是一个回溯的过程,即事件冒泡。
某些事件可用于控制实现下一步可能采取的行为(或撤消实现已执行的操作)。此类别中的事件被认为是可取消的,要取消事件,请调用以下方法。
stiopPropagation()方法
stiopPropagation()方法的的官方解释为:终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后,该节点上处理该事件的处理程序将被调用,事件不再被分派到其他节点。
preventDefault()方法
取消事件的默认动作。 这个方法通知浏览器取消执行与事件关联的默认动作。如<a>标签的地址跳转等。 return false方法 对于这个方法,相信同学们一定不会陌生。在甚多时候,return false可以替代stopPropagation()和preventDefault()。 但是并不是所有的情况下都可以用return false来替代上两种方法。 因为return false方法:不但阻止事件执行,而且会跳出,return false之后的所有事件都不会执行。 需要注意的是,我们无法在事件捕获阶段阻止事件冒泡!!!
以上就是js事件传播的流程和阻止方法,希望对您有帮助!
欢迎加关注啊!么么哒…