Javascript事件冒泡

Posted 2020-07-27 在修行

1.javascript的dom是相互嵌套的，当点击子元素的时候，事件在子元素上触发，然后事件会逐级向上层传递。这就叫事件冒泡。

event.stopPropagation();可以停止事件冒泡,即不再向上级传递事件。

2.事件委托，由于事件会逐级向上传递，因此我们可以将本来要子元素执行的函数，委托给父元素。父元素捕获到子元素的事件后，帮助子元素执行函数。

event.target  触发事件的元素

event.currentTarget  当前捕获该事件的元素

3.jquery对事件委托的处理：   delegate(selector,[type],[data],fn)

  type:     附加到元素的一个或多个事件。由空格分隔多个事件值。必须是有效的事件。

     data:   传递到函数的额外数据

     fn:       当事件发生时运行的函数　　

概述：

         指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。

         使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。

 3.dom2级事件函数，w3c自带的添加事件addEventListener(type,function,isCatch)，移除事件removeEventListener

　　isCatch是否捕获，true：捕获，false：冒泡。事件处理机制，冒泡兼容性比较好。