前端面试系列：DOM事件类

2020-01-03 本文已影响0人乌龟小姐v

一、基本概念：

DOM事件的级别

DOM0: element.onclick=function(){}
DOM2: element.addEventListener('click',function(){},false)
DOM3: element.addEventLListener('keyup',function(){},false) 增加了很多事件类型
注意：true表示在捕获阶段触发，false表示在冒泡阶段触发，默认是false。
DOM1没有设计和DOM事件相关相关的内容。

二、DOM事件模型

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

三、DOM事件流

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

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

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

window——>document——>html——>body——>父级元素——>...——>目标元素

<body>
    <div id="ev">
        <style>
            #ev {
                width: 300px;
                height: 100px;
                background: #f00;
                color: #fff;
                text-align: center;
                line-height: 100px;
            }
        </style>
        目标元素
    </div>
    <script type="text/javascript">
        var ev = document.getElementById("ev");
        ev.addEventListener('click', function() {
            console.log("ev capture");
        }, true);
        window.addEventListener('click', function() {
            console.log("window capture");
        }, true);
        document.addEventListener('click', function() {
            console.log("document capture");
        }, true);
        document.documentElement.addEventListener('click', function() {
            console.log("html capture");
        }, true);
        document.body.addEventListener('click', function() {
            console.log("body capture");
        }, true);
    </script>
</body>

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

五、Event对象的常见应用

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

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

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

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

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

var eve = new Event("test", { detail: elem.dataset.time });