第一个参数type,事件的类型,如click,mouseover等;

fn,事件监听执行的function;

第三参数,决定事件执行的过程(大概这样解释。。),捕获或者冒泡,首先我们看一张图片:

事件流原理

由此可以知道
  1、一个完整的JS事件流是从window开始,最后回到window的一个过程
  2、事件流被分为三个阶段(1~5)捕获过程、(5~6)目标过程、(6~10)冒泡过程

e.target和e.currentTarget

  target和currentTarget都是event上面的属性,target是真正发生事件的DOM元素,而currentTarget是当前事件发生在哪个DOM元素上。

  可以结合控制台打印出来的信息理解下,目标阶段也就是 target == currentTarget的时候。我没有打印它们两个因为太长了,所以打印了它们的nodeName,但是由于window没有nodeName这个属性,所以是undefined。

事件委托和事件代理的理解

事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件,当我们需要对很多元素添加事件的时候,可以通过事件添加到他们的父节点二将时间委托给父节点来触发处理函数

减少与dom的交互次数,提高性能

事件委托的原理?

事件委托是利用事件的冒泡机制来实现的,何为事件冒泡呢?这里介绍下浏览器dom事件处理的过程,dom2.0模型将事件流程分为三个阶段:事件捕获阶段,事件目标阶段,事件冒泡阶段。

事件捕获:当某个元素触发某个事件,顶层对象document就会发出一个事件流,随着dom树的节点向目标元素节点流去,直到到达事件真正发生的目标元素,在这个过程中,事件相应的监听函数是不会被触发的
事件目标:当到达目标元素之后,执行目标元素该事件相应的处理函数,如果没有绑定监听函数,那就不执行
事件冒泡:从目标元素开始,往顶层元素传播,途中如果有节点绑定了相应的事件处理函数,这些函数都会被一次触发,如果想阻止事件冒泡,可以使用event.stopPropgation()或者event.cancelBubble=true来阻止事件的冒泡传播

转载请保持原始链接

原始链接: https://ru23.com/note/f078bfb.html