事件委托/事件冒泡/事件捕获&&阻止事件冒泡/阻止事件默认行为

要了解事件委托,首先要了解事件流的概念和事件执行流程:

DOM2级中同时支持两种事件模型:捕获型事件和冒泡型事件 ,并且每当某一事件发生时,都会经过捕获阶段->处理阶段->冒泡阶段(有些浏览器不支持捕获) ;事件的捕获阶段是由上层元素到下层元素的顺序依次。而冒泡阶段则正相反。


当事件触发时body会先得到有事件发生的信息,然后依次往下传递,直到到达最详细的元素,这就是事件捕获阶段。 
还记得事件注册方法ele.addEventListener(type,handler,flag)吧,Flag是一个Boolean值,true表示事件捕捉阶段执行,false表示事件冒泡阶段执行,默认为false。 
接着就是事件冒泡阶段。从下往上 依次执行事件处理函数(当然前提是当前元素为该事件注册了事件句柄)。,在这个过程中,可以阻止事件的冒泡,即停止向上的传递。 

想一个例子:你一定有过经历,给一个ul的所有li添加点击事件,然后用了一个循环,给每个li都添加了onclick监听事件,这是很危险的做法,理论上,如果li足够多,就足以造成点击某个li的一瞬间浏览器崩溃。所以这时候就要用到事件捕获,将点击事件绑定在li的父元素中,当点击事件发生时,父元素会在其子元素中层层查找一直到达触发事件那个最详细元素的位置(即触发事件的最内层元素),下面是一个例子,大家可以参考一下:




    
    事件冒泡/事件捕获&&阻止事件冒泡/阻止事件默认行为
    


    
  • 1
  • 2
  • 3


你可能感兴趣的:(javascript篇)