什么是事件监听？

Posted 2020-11-06 凯尔Grant

1.DOM 0级事件，普通的事件，事件源.事件类型 = 预处理函数，缺点：后者的事件会将前者的事件覆盖掉

2.DOM 2级事件，事件监听

<1>语法：addEventListener(参数1，参数2，参数3)，参数1：事件类型，这个事件类型不加on

参数2：回调函数；参数3：false代表事件冒泡，true代表事件捕获

前者事件先执行，后者事件后执行，注意IE不支持这个方法，其他浏览器支持

解绑事件：removeEventListener(事件，回调函数)；//这个回调函数要单独写出来才可以正常的解绑，不然无法解绑

<2>IE浏览器支持的事件监听方法：语法：attachEvent(参数1，参数2)；参数1：事件类型，on需要加；参数2：回调函数；

后者事件先执行，前者事件后执行

解绑事件：detachEvent(事件，回调函数);

3.事件流：当一个元素触发一个事件的时候，这个元素将这个事件会进行传播这样的一个过程叫做事件流

4.事件冒泡：当子级触发事件的时候会将子级冒泡到父级上去（会传播到父级）

原理是由微软公司提出，IE浏览器支持事件冒泡，IE浏览器中没有事件捕获

类比：石头砸到水底后，湖底会有气泡往上冒，由点找面

 

 

 

 

 

5.事件捕获：当父级触发事件的时候会将父级的事件传播到子集身上去（传播到子级）

原理由网景公司提出

类比：石头往下砸的一个过程，有面找点

 

6.总结：

　　<1>事件冒泡和事件捕获同时执行时，先去执行事件捕获再去执行事件冒泡（石头----底----冒泡）

　　<2>到湖底最后一刻不知道先执行捕获还是冒泡，就要看谁代码书写在前，谁先执行

 

7.事件代理/委托：利用了事件冒泡的原理将子级的事件委托给父级减少事件的绑定，调高程序的性能

类比：所有人去拿快递效率太低，委托一个人去拿所有的快递效率更高