事件

事件：用户和浏览器自身执行的某种动作，如页面加载完毕触发load事件，用户单击元素，触发click事件

DOM：addEventListener、removeEventListener、dispatchEvent

IE-DOM：attachEvent、detachEvent、fireEvent

JQuery：on、off、trigger

1. 描述js里事件的三个阶段

事件的三个阶段分别为：事件捕获、目标阶段、事件冒泡

2、事件流：

事件发生时会在元素节点和根节点中间按照特定的顺序传播，路径所经过的所有节点都会收到该事件，这个传播过程即DOM事件流。

两种事件流模型：

        冒泡型：

—》—》—》document【推荐】

        捕获型：document—》—》—》

DOM事件流：

         DOM标准采用捕获+冒泡，两种事件流都会触发DOM的所有对象，从document对象开始，也在document对象结束

 

DOM标准规定事件流包括三个阶段：

事件捕获阶段、处于事件目标阶段、事件冒泡阶段

事件捕获阶段：实际目标（

）在捕获阶段不会接收事件，即在捕获阶段，事件从document到再到就停止了。

处于目标阶段：事件在（

）上发生并处理，但是事件处理会被看成是冒泡阶段的一部分

冒泡阶段：事件又传回文档

3、事件流的典型应用-----事件代理

传统的事件处理中，需要为每个元素添加事件处理器，js事件代理则是一种简单有效的技巧，通过它可以把事件处理器添加到一个父级元素上，从而避免把事件处理器添加到多个子级元素上。

事件代理的原理：事件冒泡和目标元素，把事件处理器添加到父元素，等待子元素冒泡，并且父元素能够通过target（IE为srcElement）判断是哪个子元素，从而做相应处理。

例子：传统事件处理，为每个子元素添加事件处理器，

事件代理方式：只需给父元素添加事件代理器，等待其子元素冒泡即可

事件代理的好处：

1】、将多个事件处理器减少到一个，因为事件处理器要驻留内存，这样可以大量减少内存占用，提供性能，减少事件注册

2】、DOM更新不需要重新绑定事件处理器，因为事件代理对不同子元素可采用不同处理方法，如果新增其他子元素（a,span,input等），直接修改事件代理的事件处理函数即可，不需要重新绑定处理器，不需要再次循环遍历。

事件代理的缺点：

     适用于表格/列表等重复性Dom元素，事件代理用不好可能出现事件误判，即本不应该触发事件的元素被绑定了事件

事件代理的问题：

事件代理同时绑定了li和span，当点击span的时候，li和span都会冒泡。

解决方法1：span的事件处理程序中阻止冒泡

 解决方法2：li的事件处理程序中检测target元素

   事件代理的有趣应用：点击一个列表时，输出对应的索引

4、IE和W3C标准绑定事件的区别？参数分别是什么？IE事件对象中的e有什么区别？

标准：

addEventListener（eventName,function(e){},false）；

参数：

eventName：事件的名字

function：时间处理函数

false：捕获或者冒泡，默认是false冒泡

IE8以下：

attachEvent（onEventName,function(){

      var e = window.event;

}）；

参数：

onEventName：事件处理程序的名称，而不是事件名称，就是说在事件名前加on

function：时间处理函数

低版本IE浏览器中：事件对象通过window对象中获取，要取得事件对象，即window.event。

5、事件广播dispatchEvent

dispatchEvent是js的事件触发器，事件触发器就是用来触发某个元素下的某个事件，可以自定义事件，通过触发器触发

 

转载自：https://www.cnblogs.com/starof/archive/2017/05/02/6767655.html