JavaScript 事件，事件流，事件委托

今天药忘吃喽~ 2023-01-13 08:57 152阅读 0赞

#### 事件 ####

**HTML事件**  
HTML 事件可以是浏览器行为，也可以是用户行为。HTML 元素中可以添加事件属性，使用 JavaScript 代码来添加 HTML 元素。

示例：按钮元素中添加了 onclick 属性

<button onclick="this.innerHTML=Date()">现在的时间?</button>

常见的HTML事件：

<table> 
 <thead> 
  <tr> 
   <th>事件</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>onchange</td> 
   <td>HTML 元素改变</td> 
  </tr> 
  <tr> 
   <td>onclick</td> 
   <td>用户点击 HTML 元素</td> 
  </tr> 
  <tr> 
   <td>onmouseover</td> 
   <td>用户在一个HTML元素上移动鼠标</td> 
  </tr> 
  <tr> 
   <td>onmouseout</td> 
   <td>用户从一个HTML元素上移开鼠标</td> 
  </tr> 
  <tr> 
   <td>onkeydown</td> 
   <td>用户按下键盘按键</td> 
  </tr> 
  <tr> 
   <td>onload</td> 
   <td>浏览器已完成页面的加载</td> 
  </tr> 
 </tbody> 
</table>

#### 事件流 ####

事件流就是描述了页面中接受事件的顺序，IE和Netscape提出来差不多完全相反的事件流的概念，IE事件流是事件冒泡流，Netscape事件流是事件捕获流。

**事件冒泡**  
事件冒泡即事件最开始由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播至最不具体的节点（文档）。（由内及外）

![5db03f690f9d5e288f91411c6fb278d1.png][]

示例：

**事件捕获**  
事件捕获即事件最早由不太具体的节点接收，而最具体的节点最后接收到事件。（由外及内）

![69b56c11b1fe38703455e0b38f3e23fe.png][]

示例：

document.getElementById("div").addEventListener('click',div,true);
    document.getElementById("aTag").addEventListener('click',aTag,true);
    document.getElementById("span").addEventListener('click',span,true);

第三个参数设置为true，即为捕获事件，默认为false；否则的话，事件流还是和上面的一样，因为不管是在IE还是标准浏览器下，事件冒泡浏览器都支持的。

**DOM事件流**  
DOM2级事件流：  
DOM2级事件 规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。  
![4a6f7e9a44d5b645a193abf506b0137a.png][]

*  捕获阶段：实际目标(
    
    元素)在捕获阶段不会接收事件，意思是事件从 \[ document->html->body \] 后就停止了。【1、2、3】
 *  目标阶段：事件在目标元素上发生。但事件处理被看作是冒泡阶段的一部分。
 *  冒泡阶段：从目标元素开始处理事件，一直传播到文档。也就是 \[ div->body->html->document \]【4、5、6、7】

**DOM事件级别**

**（1）DOM0级**  
DOM0级事件具有极好的跨浏览器优势，会以最快的速度绑定。绑定方式有如下两种

*  行内绑定（内联模型）  
    将函数名直接作为html标签中属性的属性值。

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

*  动态绑定（脚本模型）  
    通过在JS中选中某个节点，然后给节点添加onclick属性。

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

**（2）DOM2级**  
DOM2级定义了两个事件处理程序。（观察者模式）

*  addEventListener() ：添加事件侦听器
 *  removeEventListener() ：删除事件侦听器

**（3）DOM3级**  
对DOM2增加了内容模型 (DTD 、Schemas) 和文档验证。定义了一些新的事件，比如键盘事件，还可以自定义事件。

**自定义事件**：  
自定义事件不是由DOM原生触发的，它的目的是让开发人员创建自己的事件。  
要创建的自定义事件可以由createEvent(“CustomEvent”); 返回的对象有一个initCustomEvent（）方法接收如下四个参数。

*  type：字符串，触发的事件类型，自定义。例如 “keyDown”，“selectedChange”;
 *  bubble（布尔值）：标示事件是否应该冒泡；
 *  cancelable(布尔值)：标示事件是否可以取消；
 *  detail（对象）：任意值，保存在event对象的detail属性中；

#### 事件委托 ####

一个事件本来是要绑定到某个元素上，然而却绑定到了该元素的父（或祖先）元素上，利用事件冒泡原理，触发执行效果。

**事件委托优点：**

*  提高网页性能。
 *  通过事件委托添加的事件，对后期生成的元素依然有效。

**事件委托的使用方法：**

var ul = document.querySelector("ul");
    ul.onclick = function(e){ 
        var e = e || window.event;
        var target = e.target || e.srcElement;
    
        if(target.nodeName.toLowerCase() === "li"){ 
            alert("li");
        }
    }

[5db03f690f9d5e288f91411c6fb278d1.png]: /images/20221022/fd527adb26204cdda9a6367b86c2133e.png
[69b56c11b1fe38703455e0b38f3e23fe.png]: /images/20221022/4d53ddd8e08645288c14eab4f5b97ffb.png
[4a6f7e9a44d5b645a193abf506b0137a.png]: /images/20221022/5056c9c6d3024244b32d927835d51ed2.png