五分钟了解DOM 事件模型

通俗理解，事件是用户或者浏览器自己执行的某种动作，是文档或者浏览器发生的一些交互瞬间，比如点击（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