一二面_DOM事件类

Posted 2021-07-24 煜成'Studio

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了一二面_DOM事件类相关的知识，希望对你有一定的参考价值。

一二面_DOM事件类

基本概念：DOM事件的级别或者问DOM标准定义的级别？请用dom2事件如何如何

DOM0 element.onclick = function(){}
DOM1标准制定的时候没有涉及和事件相关的东西，所以说事件级别的时候直接跳过DOM1，但DOM1标准也是存在的
DOM2 element.addEventListener(‘click’, function(){}, false) //事件监听的方式，这个false是指定是冒泡还是捕获，默认值是false，在冒泡阶段触发
DOM3 element.addEventListener(‘keyup’, function(){}, false) //DOM3的事件类型增加了很多，比如鼠标事件、键盘事件等

DOM事件模型是什么

捕获（从上到下）和冒泡（从下到上）

DOM事件流

浏览器在为这个当前页面与用户交互的过程中，假如点击了鼠标左键，那么这个动作是怎么传到页面中的，是怎么响应的
一个完整的事件流分为三个阶段：
第一阶段：捕获阶段。从window到document，再一步步向下
第二阶段：目标阶段。点击一个按钮，这个按钮就是目标阶段，事件通过捕获到达目标元素时就是目标阶段
第三阶段：冒泡阶段。从目标元素上传到window对象

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

window => document => html标签（在js中，怎么来获取html标签？） =>body => …一层层往下传到达目标元素
冒泡的流程与之相反

在js中，怎么来获取html标签？

例如想获取body标签，可以通过document.body获取当前的DOM节点，但是html节点不能用document.html拿到，而是用document.documentElement返回html节点

Event对象的常见应用（自己看取鼠标值和键盘值这部分）

event.preventDefault() //阻止默认事件
event.stopPropagation() //阻止冒泡行为，应用在触发子元素事件但是不想触发父元素事件的情况
event.stopImmediatePropagation() //用在事件响应优先级的场景。举例场景：一个按钮，绑定了两个click事件A和B，通过优先级的方式，第一个响应A，第二个响应B，想A响应了之后不再响应B了，event.stopImmediatePropagation()加在A的响应函数中，就能成功阻止了B的执行，这个可以应用在事件响应优先级
event.currentTarget //指的是当前被绑定的事件，也就是事件代理中父级元素被绑定的事件。和下面的event.target应用在事件代理（在父元素绑定事件，子元素就都会具有此功能）
event.target //事件代理中，表示当前被执行的是哪个子元素

自定义事件/模拟事件

场景：比如有个按钮，不是常规的click事件，想给它自己增加一个事件，想在别的地方触发这个事件而不是用回调的方式去处理，这时候便可以用自定义事件了
自定义事件的用法：new Event来声明一个自定义事件
自定义事件和自定义触发事件过程如下：
var eve = new Event(‘custome’); //把eve事件对象就当成一个普通的click对象，只不过这个事件名是你自己定义的custome
ev.addEventListener(‘custome’, function(){ //ev是个DOM节点，通过DOM2这个事件注册的方式绑定这个事件名称
console.log(‘custome’);
})
ev.dispatchEvent(eve); //最后触发就是用这个DOM节点的dispatchEvent这个API触发eve这个对象
但是Event不足的地方是只能指定事件名，例如上面例子的custome，如果想给事件加一些数据，那么Event是做不到的，此时可以用CustomEvent
Event和CustomEvent的唯一区别是CustomEvent除了可以指定事件名，还可以后面跟一个object来做指定参数，这个参数是自定义的，其他用法和Event一模一样

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Event</title>
</head>
<body>
    <div id="ev">
        <style>
            #ev{
                width: 300px;
                height: 100px;
                background: red;
                color: #fff;
                text-align: center;
                line-height: 100px;
            }
        </style>
        目标元素
    </div>
    <script>
        var ev = document.getElementById('ev');

        // 第一个参数为事件名，第二个参数为响应函数，第三个参数默认值为false，表示这个事件在冒泡阶段触发，也可以设置为true，表示这个事件是在捕获阶段触发
        // 以下演示捕获阶段过程，若需是冒泡阶段，把true换位false即可
        window.addEventListener('click', function () {
            console.log('window capture');
        }, true);

        document.addEventListener('click', function () {
            console.log('document capture');
        }, true);

        // html捕获
        document.documentElement.addEventListener('click', function () {
            console.log('html capture');
        }, true);

        // body捕获
        document.body.addEventListener('click', function () {
            console.log('body capture');
        }, true);

        // ev没有父级元素了，所以就捕获ev了
        ev.addEventListener('click', function () {
            console.log('ev capture');
        }, true);
        // 注意：打印在控制台的顺序和这个书写顺序一样，即使把他们换了位置，打印顺序依旧不变，因为这个捕获的流程

        // 自定义事件
        // 事件名是test
        var eve = new Event('test');
        // 为ev这个DOM节点绑定一下这个事件
        ev.addEventListener('test', function () {
            console.log('test dispatch');
        });
        // 触发自定义事件，直接就触发了，在实际业务中，这个应该是和别的事件结合一起用的，比如下面用延时器模拟别的的某个动作
        // 注意：这个地方记住不是使用事件名test，而是使用的是事件对象eve
        // setTimeout(function () {
            ev.dispatchEvent(eve);
        // }, 1000);
    </script>
</body>
</html>

以上是关于一二面_DOM事件类的主要内容，如果未能解决你的问题，请参考以下文章