DOM事件： DOM事件级别DOM事件流DOM事件模型DOM事件捕获过程自定义事件

Posted 2021-03-22 xuhua123

前端面试中只要问到事件，就肯定会有DOM事件；
如果回答出来了，就会一直向下延申，其实这些东西都很简单，但我第一次被问到的时候，也是懵的；

DOM事件级别：
DOM0 element.onclick = function() { }
DOM1 一般只有设计规范，没有设计跟事件相关的东西；所以直接跳过
DOM2 element.addEventListener(‘click’, function() { }, false)
DOM3 element.addEventLIstener(‘keyup’, function() { }, false)

DOM3在DOM2的基础上参加了很多的事件类型；

DOM2、DOM3 中的第三个参数表示：该事件在捕获阶段触发（true）、在冒泡阶段触发（false）

DOM事件模型：
就是正常的事件 冒泡 和 捕获
向上冒泡 向下捕获

DOM事件流：
事件流就是： 浏览器在为这个页面与用户做交互的过程中，（比如我点击了鼠标左键）如何将这个左键是传到页面上的，又是如何响应的；

一共分为三个阶段：捕获 -> 目标阶段 -> 冒泡
事件通过 捕获 到达目标元素，这个阶段为 目标阶段； 从目标元素再上传到window对象 即冒泡阶段

DOM事件捕获过程：
一个事件首先会被 window捕获，其捕获流程：
window -> document -> html -> body -> … -> 目标元素

 1   <style>
 2     #ev {
 3       background: lightblue;
 4       width: 200px;
 5       height: 200px;
 6       text-align: center;
 7       line-height: 200px;
 8     }
 9   </style>
10   <div id="ev">
11     目标元素
12   </div>
13   <script>
14     var ev = document.getElementById(‘ev‘);
15     // 为了能表现出事件捕获流程，这里使用在捕获时触发事件
16     window.addEventListener(‘click‘, function() {
17       console.log(‘window capture‘);
18     }, true)
19 
20     document.addEventListener(‘click‘, function() {
21       console.log(‘document capture‘);
22     }, true)
23 
24     document.body.addEventListener(‘click‘, function() {
25       console.log(‘body capture‘);
26     }, true)
27 
28     ev.addEventListener(‘click‘, function() {
29       console.log(‘ev capture‘);
30     }, true)
31   </script>

 

 

 

Event对象的常见应用:
event.preventDefault()
阻止 元素的默认行为（如链接的跳转）

event.stopPropagaation()
阻止捕获和冒泡阶段中当前事件的进一步传播。

event.stoplmmediatePropagation()
阻止事件冒泡并且阻止相同事件的其他侦听器被调用。
备注：如果有多个相同类型事件的事件监听函数绑定到同一个元素，当该类型的事件触发时，它们会按照被添加的顺序执行。如果其中某个监听函数执行了 event.stopImmediatePropagation() 方法，则当前元素剩下的监听函数将不会被执行。

event.currentTarget（当前所绑定的事件的元素） event.target（当前被点击元素）
这两个一般都是放在一起问的：
备注： 事件代理： 把子元素的相同事件都放在父元素上，这样只要绑定一次就可以实现多个元素的使用。在这样的情况下，你就需要去判断到底是哪一个子元素被点击了；这里就要用到event.target 。

自定义事件：
这属于是进阶了，一般情况下问到这里，你就稳了； 在实际开发中也会经常用到。

 

    var eve = new Event(‘custome‘);
    ev.addEventListener(‘custome‘, function() {
      console.log(‘custome capture‘);
    })
    ev.dispatchEvent(eve);