事件委托原理及应用（必学知识点总结）

光头马

目录

• 事件委托与事件对象
  
  
  
  • 事件冒泡与事件捕获
    
  • 添加事件处理的方法
    
  • DOM2 Events事件流
    
  • 事件对象常用属性和方法
    
  • 事件委托的应用（实现hover悬停变色效果）
    
  
  

事件委托与事件对象

事件冒泡与事件捕获

事件流：用于描述页面接收事件的顺序。以下是事件流的两种不同方案：
事件冒泡：事件由最具体的元素逐级向上传递到最不具体的元素。
事件捕获：事件由最不具体的元素逐级向下传递到最具体的元素。
以上的两种事件流方案是截然相反的，分别由IE开发团队和Netscape开发团队提出。
添加事件处理的方法

HTML事件处理程序：利用特定HTML标签的事件属性（）。代码如下：

1. [/code][b]DOM0事件处理程序[/b]：利用DOM节点自带的事件属性。代码如下：
2. [code]

复制代码

DOM2事件处理程序（推荐）：利用DOM节点（继承自EventTarget）的添加事件监听器方法。代码如下：

1. [/code]说明：在网页DOM编程中的继承关系：EventTarget                Element body        =>        Element div
2. [b]冒泡阶段[/b]：Element div        => Element body        =>        Element html        =>        Document
3. 我们首先了解EventTarget.addEventListener(type, listener, options)这个方法的一些内部参数：
4. type：监听事件的类型
5. listener：接收一个回调函数，事件触发后会执行。
6. options：里面有比较多的可选项参数，这里我们利用capture（布尔值：默认为false）这个参数。表示监听的事件在捕获阶段会触发listener执行。
7. 接下来我们利用上面的方法还原上面DOM2事件流的捕获阶段与冒泡阶段，如下：
8. [code]我是一个事件，请点击验证

复制代码

很明显，上面的代码验证了网页的事件触发会存在DOM2事件流这一执行过程。我们点击了事件，这个事件经历了由捕获阶段再到冒泡阶段的传递。
事件对象常用属性和方法

方法属性说明Event.target 只读对事件原始目标的引用。Event.type 只读事件的类型，不区分大小写。event.preventDefault取消默认事件（如果该事件可取消）。event.stopPropagation停止冒泡，阻止事件在 DOM 中继续冒泡。其中Event.target最为常用，具体指代触发了相应事件的Node节点目标。
事件委托的应用（实现hover悬停变色效果）

需求：实现一个列表，鼠标进入或离开都会使列表子元素的背景颜色改变。
如果没有事件委托，我们一般实现这个需求应该这样做。如下：

1.     <ul >
2.         <li>1</li>
3.         <li>2</li>
4.         <li>3</li>
5.         <li>4</li>
6.     </ul>

复制代码

我们遍历每个li元素并为其添加鼠标移入与移出事件。目前总共添加了八个事件处理程序。
注意：在JavaScript中，事件处理程序的数量会影响页面的整体性能。
因此对上述实现方式我们有必要采取措施优化。利用事件委托优化如下：

1. // 点击li元素后会通过事件冒泡机制触发ul添加的click事件。    <ul >
2.         <li>1</li>
3.         <li>2</li>
4.         <li>3</li>
5.         <li>4</li>
6.     </ul>

复制代码

我们只给list元素添加了两个事件，同样实现了需求。如果采用原始方式，我们一共给这些li元素添加了八个事件。利用事件委托的方式进行网页性能的优化，其效果不言而喻。

参考
MDN-Event
JavaScript高级程序设计（第4版）

来源:https://www.cnblogs.com/chscript/p/16994968.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！