推荐下载
-
2020-05-12 浏览：740
-
2020-05-06 浏览：521
-
2020-05-08 浏览：510
-
2020-04-04 浏览：504
-
2020-05-12 浏览：502
这次一定彻底弄懂DOM事件机制
发布时间:2021-01-14在网页端、移动端H5、小程序等各个终端环境的前端开发中随处可见事件的运用，可见事件机制的是前端这一块的重中之重。经过我研读了大量博客文章以及开源框架源码后，这次算是对DOM事件机制有了更新更全面的的认识。
下文主要通过一个例子带你 分析DOM事件的传递、事件处理 ，然后在此基础上再 深入总结对事件监听的优化方案 ，最终总结下DOM事件机制 在开源框架中的实战应用 。
一、从实例看事件传递以下面这个普通的html文件为例
<!DOCTYPE html> <html lang="en" onclick="handleClickHtml()"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body onclick="handleBodyClick()"> <div id="div1" onclick="handleClick2()"> <button id="button1" onclick="handleClick1()">handleClick1</button> </div> <script> function handleClick1(e) { console.log('click1') } function handleClick2(e) { console.log('click2') } function handleBodyClick(e) { console.log('body clicked') } function handleClickHtml(e) { console.log('html clicked') } document.addEventListener('click', e => { console.log('document clicked') }) </script> </body> </html> 复制代码例子中给 document、html、body、div、button 都添加了点击事件，其执行结果如下：
由鼠标、键盘、触摸屏、窗口缩放、图片加载、节点焦点变化等触发事件，每个触发的事件都有一个target——事件目标，根据target往html根节点遍历就可以确定节点嵌套层级关系，从而确定此事件的传递路径。
事件传递路径由浏览器、webview来确定
事件传递为何要来回走两遍？一个事件来回走两遍是便于事件响应时机的控制（下文的事件冒泡与事件捕获的应用中有体现），同时也存在事件冒泡的浏览器历史原因（与IE、Netscape有关，不赘述）。
事件响应事件在从自上而下的传递过程中会 判断当前node节点是否绑定对应事件的监听器 ，若有则执行响应监听器的事件处理程序（也就是绑定的事件要执行的逻辑），这里的执行就是所谓的事件响应。
事件的响应过于与事件的类型是捕获事件、冒泡事件有关，同时是否组件冒泡还会影响该事件的后续传递过程，具体执行流程总结成如下图所示：
根据事件传递中的两种传递路径分别分为： 由上至下——事件捕获阶段，由下至上——事件冒泡阶段 ，指的是一个事件由window（上图并未标出window）到target之间的传递的过程。
可以通过组织事件冒泡让事件不再继续完成由下至上的过程，这会让target的父节点绑定冒泡阶段的事件监听器不响应事件。
可以通过指定事件在捕获阶段执行。
:chestnut:冒泡的应用看下面这个例子，可以通过 stopPropagation 来阻止事件继续往上冒泡， window、document、html 上添加的点击事件均不会生效
<!-- 省略了部分代码 --> <div id="div1"> <button id="button1">button</button> </div> <script> var div1 = document.getElementById('div1') var button1 = document.getElementById('button1') div1.addEventListener('click', (e) => { console.log(e.currentTarget) }, false) button1.addEventListener('click', (e) => { console.log(e.currentTarget) e.stopPropagation() // 关键代码：组织了click事件继续往上冒泡 }, false) 复制代码// 以下是监听html、document的点击事件 function handleClickHtml(e) { console.log('html clicked') } document.addEventListener('click', e => { console.log('document clicked') }) </script> 复制代码
点击button的打印结果如下：
addEventListener需要用attachEvent进行兼容性处理，第三个参数默认值为false表示在事件冒泡阶段响应事件
:chestnut:捕获的应用