详解JavaScript事件流与DOM事件处理机制

JavaScript事件流概述

事件

HTML页面与JavaScript的交互主要依靠事件驱动机制，例如鼠标点击、页面滚动（onscroll）等。开发者可以通过向文档或特定元素添加事件侦听器来预先设定事件响应。为了明确这些事件触发的具体时机与顺序，理解“事件流”的概念至关重要。

事件流

事件流指的是页面接收事件的顺序。在早期浏览器发展中，IE与Netscape提出了截然相反的事件流模型：IE采用的是事件冒泡机制，而Netscape浏览器则采用事件捕获机制。

事件流类别

事件冒泡

该机制遵循从下至上的传播路径，即事件从触发目标元素开始，逐级向上传播，直至到达window对象。

事件捕获

该机制遵循从上至下的传播路径，即事件从document对象开始，逐级向下传播，最终到达目标元素。

随后，ECMAScript在DOM2规范中对事件流进行了标准化定义，其核心逻辑实际上是上述两种机制的结合。

根据DOM2级事件规范，事件流包含以下三个阶段：

1. 事件捕获阶段
2. 处于目标阶段
3. 事件冒泡阶段

注意⚠️：整体流程遵循“先捕获后冒泡”的顺序。但在目标节点上，执行顺序取决于事件监听器的注册顺序，先注册者先执行。在目标元素层面，不区分冒泡或捕获阶段，仅按绑定顺序执行。

DOM事件级别演进

DOM事件级别

DOM事件处理标准共分为四个主要级别。

DOM0：不属于W3C正式规范。

DOM1：作为W3C规范的开端，主要聚焦于HTML文档与XML文档的结构定义。

DOM2：在DOM1基础上，增加了样式表对象模型（CSSOM）。

DOM3：在DOM2基础上，进一步增加了内容模型（如DTD、Schemas）及文档验证功能。

DOM0级事件处理

DOM0级

DOM0级事件处理具有极佳的跨浏览器兼容性，且绑定速度最快。其绑定方式主要有两种：

行内绑定（内联模型）

直接将函数名称作为HTML标签中对应属性的属性值进行绑定。

<div onclick="btnClick()">按钮</div>
<script>
function btnClick(){
  console.log("hello");
}
</script>

动态绑定（脚本模型）

在JavaScript代码中选中特定DOM节点，随后为该节点添加onclick等属性来绑定处理函数。

<div id="btn">按钮</div>
<script>
var btn = document.getElementById("btn");
btn.onclick = function(){
  console.log("点击");
}
</script>

注意⚠️

• 对于DOM0级事件，同一节点只能注册一次同类型事件；若多次注册，后添加的处理函数将覆盖前面的处理函数。
• DOM0级事件仅支持冒泡机制，不支持捕获。

DOM1级

在DOM1级事件处理标准中，并未定义具体的事件处理相关规范，因此实际上不存在所谓的“DOM1级事件处理”概念。

DOM2级事件处理

DOM2级

DOM2级规范定义了两个核心事件处理程序，体现了观察者模式的设计思想：

• addEventListener() —— 用于添加事件侦听器
• removeEventListener() —— 用于删除事件侦听器

这两个函数均接收3个参数：第一个参数为要处理的事件名称；第二个参数为事件处理函数；第三个参数为布尔值，默认false表示使用冒泡机制，true表示使用捕获机制。

<div id="btn">按钮</div>
<script>
var btn=document.getElementById("btn");
btn.addEventListener("click",hello,false);
btn.addEventListener("click",helloagain,false);
function hello(){
  console.log("hello");
}
function helloagain(){
  console.log("hello again");
}
</script>
// 点击后结果： 
// hello
// hello again

注意⚠️

如果针对同一元素注册了完全相同的监听方法（参数一致），后续注册可能会发生覆盖行为，导致部分监听失效。

<div id="btn">点击</div>

<script>
var btn=document.getElementById("btn");
btn.addEventListener("click",hello,false);
btn.addEventListener("click",hello,false);
function hello(){
  console.log("hello");
}
</script>
// 点击后结果： 
// hello

DOM3级与自定义事件

DOM3级

DOM3级在DOM2的基础上增加了内容模型（DTD、Schemas）和文档验证功能，并定义了一系列新事件，例如键盘事件，同时支持自定义事件的创建。

自定义事件

自定义事件并非由DOM原生触发，其目的是允许开发人员创建专属事件。要创建自定义事件，需调用createEvent("CustomEvent")，该方法返回的对象包含initCustomEvent()方法，该方法接收以下四个参数：

• type：字符串类型，表示触发的事件类型，由开发者自定义，例如“keyDown”或“selectedChange”。
• bubble（布尔值）：标识该事件是否应该冒泡。
• cancelable（布尔值）：标识该事件是否可以被取消。
• detail（对象）：任意类型的值，该值将被保存在event对象的detail属性中。

创建好的自定义事件对象可以像普通DOM事件一样在DOM树中分派。例如：

var div = document.getElementById("myDiv");
EventUtil.addEventHandler(div,"myEvent", function () {
 alert("div myEvent!");
});
EventUtil.addEventHandler(document,"myEvent",function(){
 alert("document myEvent!");
});
if(document.implementation.hasFeature("CustomEvents","3.0")){
 var e = document.createEvent("CustomEvent");
 e.initCustomEvent("myEvent",true,false,"hello world!");
 div.dispatchEvent(e);
}

在上述示例中，创建了一个名为“myEvent”的冒泡事件。event.detail被设置为字符串“hello world”。随后在div和document上监听该事件，由于在initCustomEvent中设置了冒泡为true，当div触发该事件时，浏览器会将事件冒泡至document。

阻止冒泡与事件委托

阻止冒泡

stopPropagation函数

btn.addEventListener('click',function(ev){
  ev.stopPropagation();
  console.log('阻止冒泡')
}, false)

事件委托（事件代理）

原理

当需要监听多个DOM节点的事件时，若为每个节点单独绑定监听函数，会严重影响页面性能。通过事件委托进行优化，其核心原理正是利用事件冒泡机制。

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>
<script>
  var li_list = document.getElementsByTagName('li')
  for(let index = 0;index<li_list.length;index++){
    li_list[index].addEventListener('click', function(ev){
      console.log(ev.currentTarget.innerHTML)
    })
  }
</script>

常规做法是为每个li元素绑定事件，但如果li是动态渲染且数据量巨大，每次渲染（特别是新增节点）后都需重新绑定，既繁琐又消耗性能。此时，可将事件监听委托给li的父级元素（如ul）。

var ul_dom = document.getElementsByTagName('ul')
ul_dom[0].addEventListener('click', function(ev){ 
  console.log(ev.target.innerHTML)
})

target和currentTarget区别：

• target属性返回实际触发事件的元素，该元素不一定是绑定监听器的元素。
• currentTarget属性返回当前正在处理事件的元素，即绑定监听器的元素。

优点

• 提高性能：每个函数都会占用内存空间，通过事件委托只需添加一个事件处理程序即可代理所有子元素事件，从而显著减少内存占用。
• 动态监听：使用事件委托可以自动绑定动态添加的子元素，即新增节点无需主动添加监听器即可继承父级的事件行为。

以上就是详解JavaScript 事件流的详细内容，更多关于JavaScript 事件流的资料请关注本站其它相关文章！