前端面试题（3）——DOM事件类

---

1. 基本概念：
   • DOM事件的级别
2. DOM事件模型：
   • 事件冒泡
   • 事件捕获
3. DOM事件流
4. 描述DOM事件捕获的具体流程
5. Event对象的常见应用
6. 自定义事件

一、DOM事件的级别

1. DOM0: element.onclick=function(){}
2. DOM2: element.addEventListener('click',function(){},false)(true表示在捕获阶段触发，false表示在冒泡阶段触发，默认是false)；
3. DOM3: element.addEventListener('keyup',function(){},false)(true表示在捕获阶段触发，false表示在冒泡阶段触发，默认是false)，增加了很多事件类型；

二、DOM事件模型

1. 事件捕获：从上往下找到目标元素
2. 事件冒泡：从目标元素往上查找

三、DOM事件流：浏览器为当前页面和用户做交互的过程中发生的过程，一个完整的事件流分三个阶段。

1. 事件捕获
2. 目标阶段
3. 事件冒泡

事件通过捕获到达目标元素，这个时候就是目标阶段，第三个阶段就是从目标元素上传到window对象。

四、描述DOM事件捕获的具体流程

window --> document --> html(用js表示html节点的方法：document.documentElement;) --> body --> ··· --> 目标元素

    

        
        目标元素
    
    


// 打印结果是
// window capture
// document capture
// html capture
// body capture
// ev capture

五、Event对象的常见应用

1. event.preventDeault()：阻止默认行为；
2. event.stopPropation()：阻止事件冒泡；
3. event.stopImmeidiatePropagation()：阻止其他事件（若一个按钮绑定了两个或多个事件：事件a、事件b、……。当下场景想要实现点击按钮的时候只执行事件a，其他事件不执行，则在事件a的函数中加上event.stopImmeidiatePropagation()就能实现）；
4. event.currentTarget：当前所被绑定的事件；
5. event.target：当前被点击的元素（早期的ie版本不支持，早期ie用event.srcElement）；

六、自定义事件（模拟事件）

1. 自定义事件和自定义触发事件的过程(只能指定事件名，不能给事件加数据)

// eve就当作普通的事件
var eve = new Event("custome");
// ev就是普通的DOM节点
ev.addEventListener("custome",function(){
    console.log("custome");
},false);
// 此时是自动触发事件，通常和其他事件结合使用
ev.dispatchEvent(eve);
// 延时5秒后触发
setTimeout(function() {
    ev.dispatchEvent(eve);
}, 5000);

2. CustomeEvent(除了指定事件名，还能给事件加一个Object，用来传递自定义参数)；