事件监听的理解

Posted 2020-11-09 -los

一，

事件监听：为同一个对象的同一个事件绑定多个事件处理程序

 

事件绑定：对DOM元素绑定事件处理函数  一般分为三种  1、在DOM元素中直接绑定  2、在js中绑定  3、绑定事件监听函数

 

事件委托：利用冒泡的原理，把事件加到父级上，触发执行效果

 

事件委托的好处：

 1、实现对未来元素事件的绑定

          未来元素：绑定事件时，页面上还不存在的元素

 

 2、减少事件绑定，提高性能

 

1、事件分为DOM 0级事件和Dom 2级事件，DOM2级事件也叫做事件监听。DOM 0级事件的缺点是如果事件相同 后者的事件会覆盖前者的事件，DOM2级事件可以解决这个问题

 

二、DOM2级事件的方法是 

 

    addEventListener() 

        参数1：事件类型  不需要加on   

        参数2：回调函数    

        参数3：布尔值  true代表捕获   false代表冒泡

    

    解绑事件方法：removeEventListener()    

 

 

    但是IE不支持此方法

    IE浏览器下用：attachEvent()

        参数1：事件类型  需要加on

        参数2：回调函数

 

    解绑事件方法：detachEvent()

 

 

3、事件流、事件冒泡、事件捕获

 

        当一个html元素产生一个事件时,该事件会在元素节点与根节点之间的路径传播，路径所经过的节点都会收到该事件，这个传播的过程叫做DOM事件流

 

        元素触发事件时，事件的传播过程称为事件流，过程分为捕获和冒泡两种

 

        冒泡事件：微软提出的   事件由子元素传递到父元素的过程，叫做冒泡

 

        捕获事件：网景提出的   事件由父元素到子元素传递的过程，叫做事件捕获

 

4、IE与火狐的事件机制有什么区别?

        事件处理机制：IE是事件冒泡、火狐是 事件捕获;

 

5、事件代理/事件委托

    利用冒泡机制，将子元素的事件委托给父元素去监听(给父元素添加事件)，当子元素触发事件时，事件冒泡到父级如果希望指定的子元素才能触发事件，可以通过事件对象(event)获得事件源(target)，然后通过       条件判断是不是期望的子元素，如果是的话，执行事件，否则不执行

        

6、事件委托的好处

     1、实现对未来元素事件的绑定

 

     2、减少事件绑定，提高性能

 

7、如何找到事件源

     var target = e.target||e.srcElement

 

         tagName能找到事件源的元素名