五分钟了解DOM 事件模型

柔光的暖阳◎ 2022-05-01 12:10 209阅读 0赞

通俗理解，事件是用户或者浏览器自己执行的某种动作，是文档或者浏览器发生的一些交互瞬间，比如点击（click）按钮等，这里的click就是事件的名称。JS与html之间的交互是通过事件实现的，DOM支持大量的事件。DOM 事件模型这个知识点，在面试的时候也是常考知识～

## 事件流 ##

我们知道，DOM是个树形结构，当我们在页面上单击一个按钮，页面上哪些元素会触发这个事件，是发生在这个按钮上，还是这个按钮的容器元素（我们说父元素）也会触发这个点击事件呢？ 这就牵扯到事件流，从上面的思考，我们知道它描述的是事件触发顺序，那上文中是按钮和其容器元素都触发吗，它们谁先触发呢？这可不是确定的，得看是哪种类型的事件流了。

### 1、事件冒泡 ###

事件冒泡是IE 的事件流，事件是由最具体的元素接收，然后逐级向上传播，在每一级的节点上都会发生，直到传播到document对象，向Chrome这样的浏览器会冒泡到window 对象（很容易记忆，联想水里的泡泡不也这样么）。

### 2、事件捕获 ###

事件捕获是Netscape浏览器开发团队提出的，很有意思，他们思想和IE 的截然相反。也就是说，从不具体的节点到最具体的节点，一般是从document对象开始传播，不过很少人用事件捕获的，还是事件冒泡用的多。

### 3、DOM 事件流 ###

这里规定的事件流有三个阶段： 事件捕获阶段，目标阶段，事件冒泡阶段。

## 事件处理程序 ##

前面简单说了什么是事件，那响应事件的函数就是事件处理程序。比如click是事件名称，加上"on"开头，事件处理程序是onclick，有以下几种方式来给事件指定事件处理程序。

### 1、HTML 事件处理程序 ###

其实就是，HTML 的on属性。

<button onclick="doSomething()">点击</button>
    复制代码

⚠️ on + 事件名，因为要执行函数，我这里写的doSomething()，这是会执行的代码，不能写个函数名哈，要记得带上括号。使用这个方法指定的监听代码，只会在冒泡阶段触发。

### 2、DOM0 级事件处理程序 ###

其实就是，元素节点的事件属性。

var btn = document.getElementById('btn');
    btn.onclick = function () {
      console.log('被点击了！');
    };
    复制代码

⚠️ 这样就获取按钮的引用，并给它指定事件onclick,点击后在控制台输出'被点击了！'。  
如果想删除事件处理程序，只需要这样 `btn.onclick = null; // 删除事件处理程序`

### 3、DOM2 级事件处理程序 ###

记住2个方法，**addEventListener()和removeEventListener()**，用于添加和删除事件处理程序。

*（1）EventTarget.addEventListener()*

target.addEventListener(eventType, listener[, useCapture]);
    复制代码

**eventType** ————> 事件名称，大小写敏感  
**listener** ————> 监听函数  
**useCapture** ————> 可选参数，默认false，表示监听函数只在冒泡阶段被触发。  
举个例子：

function print() {
      console.log('Print Hello world');
    }
    
    var btn = document.getElementById('btn');
    btn.addEventListener('click', print, false);
    
    复制代码

上面代码的意思就是，节点id为btn的元素，使用addEventListener方法绑定click事件，点击的时候会监听函数print会发生。另外，因为useCapture设置为false，所以该函数只在冒泡阶段触发。  
当我们需要添加多个不同的监听函数，使用addEventListener非常棒，遵从先添加先触发原则，而且不小心在同一个事件重复添加了同一个函数，它还会自动移除，该函数只会执行一次。

*（2）EventTarget.removeEventListener()*  
顾名思义，用来移除addEventListener方法添加的事件监听函数。  
它的参数和addEventListener方法一致，而且写的时候要一一对应。要做到三同，一是在同一个元素节点，二是同一个监听函数，三是第三个参数要一致。

### 4、IE 事件处理程序 ###

*（1）事件绑定监听函数：attachEvent(eventType, listener)*  
*（2）事件移除监听函数：detachEvent(eventType, listener)*

## 事件对象 ##

### 1、DOM 中事件对象 ###

事件发生的时候，会将一个 event 对象传入到事件处理程序中，从而可以使用对象的属性和方法。我随意列出几个。  
bubbles：返回一个布尔值，表示当前事件是否会冒泡。该属性为只读属性  
cancelable：返回一个布尔值，表示事件是否可以取消。该属性为只读属性  
currentTarget：事件处理程序当前正在处理事件的那个元素  
preventDefault()：取消事件的默认行为。如果 cancelable 是true，则可以使用这个方法  
stopPropagation()：取消事件的进一步捕获或冒泡。如果 bubbles为 true，则可以使用这个方法。  
事件处理程序使用DOM0 级或是 DOM2 级，都会传入 event 对象，这个我们不用care。

var btn = document.getElementById("myBtn");
    btn.onclick = function(event){
          console.log(event.type);    //"click"
      };
    btn.addEventListener("click", function(event){
          console.log(event.type);    //"click"
      }, false);
    <button onclick="console.log(event.type)()">点击</button>
    复制代码

### 2、IE 中事件对象 ###

根据事件处理程序，有不同的方式。 (1) HTML 事件处理程序

<button onclick="console.log(event.type)()">点击</button>
    复制代码

(2) DOM0 级事件处理程序

var btn = document.getElementById("btn");
    btn.onclick = function(){
     var event = window.event;
     console.log(event.type);     //"click"
    };
    复制代码

(3) DOM2 级事件处理程序

var btn = document.getElementById("btn");
    btn.attachEvent("onclick", function(event){
     console.log(event.type);         //"click"
    });
    复制代码

转载于:https://juejin.im/post/5ce7a7216fb9a07ee30df487