本篇主要介绍HTML DOM中的事件流和事件委托。

其他事件文章

1. HTML 事件(一) 事件的介绍

2. HTML 事件(二) 事件的注册与注销

3. HTML 事件(三) 事件流与事件委托

4. HTML 事件(四) 模拟事件操作[未发布]

目录

1. 事件流

　　1.1 何为事件流

　　1.2 事件流的三个阶段

　　1.3 addEventListener()注册事件流的阶段

　　1.4 阻止事件流的传播

2. 事件委托

　　2.1 何为事件委托

　　2.2 ul、li场景示例

　　2.3 JQuery的事件委托

　　　　2.3.1 delegate()

　　　　2.3.2 on()

1. 事件流 (Event Flow)

1.1 何为事件流

简单来说HTML的元素会出现嵌套的关系，比如：一个Div嵌套了一个Button按钮，当2个元素都注册了click点击事件。点击里面的Button按钮时，Div的click事件也会触发。

那么问题来了，既然都会触发，得有个触发的顺序吧？是按照Div → Button这样的顺序触发，还是按照Button → Div的顺序触发？

在之前，两大浏览器厂商网景和微软都有各自的触发顺序：

网景的浏览器采用捕获方式：按照Div → Button这样的顺序触发.

而微软的浏览器采用冒泡方式：按照Button → Div的顺序触发。

在2级DOM事件规范制定时干脆合二为一：事件流同时包含了这2个阶段。

1.2 事件流的三个阶段

1.2.1 三个阶段

2级DOM事件规范制定了事件流的三个阶段：捕获阶段、目标阶段和冒泡阶段：

捕获阶段(Capture Phase)：事件从最外层的window对象到目标节点的父节点依次触发的阶段。(从外到内)

目标阶段(Target Phase)：事件在目标节点上触发时的阶段。

冒泡阶段(Bubbing Phase)：事件从目标节点的父节点到最外层的window对象依次触发的阶段。(从内到外)

1.2.2 示例图

1.3 addEventListener()注册事件流的阶段

元素对象通过addEventListener()注册事件时，此方法的的第三个参数可设置本次注册是捕获阶段还是冒泡阶段。

1.3.1 addEventListener()方法说明

语法：EventTarget.addEventListener(eventName, eventHandler [, useCapture] )

参数：

①eventName {string} ：所要注册的事件名称，不区分大小写。此名称不需要像注册事件属性那样在前缀加上"on"。如注册鼠标点击事件，写为click。

②eventHandler {function | function Object} ：函数或者函数对象。事件触发时所需要执行的函数；当使用函数对象多次注册同一事件时，只当注册一遍。

③useCapture {boolean} 可选 ：是否处于捕获阶段，默认为false。

　　|-true：当前注册的事件为捕获阶段。

　　|-false：当前注册的事件不为捕获阶段，为冒泡阶段。

1.3.2 示例

示例使用到Event事件对象的部分属性：

 readonly Object currentTarget ：只读，获取正在处理此事件的对象。

 readonly int eventPhase ：只读，表示事件的处理阶段：0表示没有正在处理，1表示捕获阶段，2表示目标阶段，3表示冒泡阶段。

 readonly Object target ：只读，获取触发此事件的对象。

function clickHandle(e){  console.log("事件阶段:"+e.eventPhase+';target:'+e.target+';currentTarget:'+e.currentTarget)} window.addEventListener('click',clickHandle,false);window.addEventListener('click',clickHandle,true);document.addEventListener('click',clickHandle,false);document.addEventListener('click',clickHandle,true);document.documentElement.addEventListener('click',clickHandle,false);document.documentElement.addEventListener('click',clickHandle,true);document.body.addEventListener('click',clickHandle,false);document.body.addEventListener('click',clickHandle,true);document.getElementById('div').addEventListener('click',clickHandle,false);document.getElementById('div').addEventListener('click',clickHandle,true);document.getElementById('btn').addEventListener('click',clickHandle,false);document.getElementById('btn').addEventListener('click',clickHandle,true);

海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com

原标题：HTML 事件(三) 事件流与事件委托

关键词：HTML