面试：DOM事件

最新推荐文章于 2022-09-14 10:34:37 发布

oiaa

最新推荐文章于 2022-09-14 10:34:37 发布

阅读量245

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_41900808/article/details/88057153

版权

前端专栏收录该内容

122 篇文章 1 订阅

订阅专栏

常考问题

DOM事件的级别
DOM事件模型。DOM事件模型是什么？
DOM事件流
描述DOM事件捕获的具体流程
Event对象的常见应用
自定义事件

事件级别

dom1标准制定的时候没有涉及事件。dom3中增加了许多事件类型，鼠标键盘等等。

事件模型

捕获、冒泡

事件流

定义：事件流所描述的就是从页面中接受事件的顺序。当点击按钮时，是按钮最外层的父元素先收到事件并执行？还是具体元素先收到事件并执行？
三个阶段：
1. 事件捕获阶段
2. 处于目标阶段：事件通过捕获到达目标元素
3. 事件冒泡阶段：从目标元素上传到window对象

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

第一个接收到事件的对象是window

Event对象常见应用

event.preventDefault() 阻止默认事件。如阻止a标签默认跳转。
event.stopPropagation() 阻止冒泡。如：子元素和父元素分别绑定了一个点击事件。此时点击子元素，不希望父元素有反应，就要用到这个函数。
event.stopImmediatePropagation() 阻止事件冒泡并且阻止相同事件的其他侦听器被调用（事件响应优先级）。如：一个按钮依次注册了a、b两个点击事件，如果希望点击a的时候不要触发b，这用这个函数。
event.currentTarget 当前绑定事件的元素
event.target 表达当前被点击的元素

自定义事件

事件捕获流程示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<style>
#ev {
    width: 200px;
    height: 100px;
    background: #eee;
    line-height: 100px;
    text-align: center;
}
</style>
<body>
    <div id="ev">target element</div>
</body>
<script>
    var ev = document.getElementById('ev');

    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);

    ev.addEventListener('click', function () {
        console.log('ev capture');
    }, true);
</script>
</html>

自定义事件示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<style>
#ev {
    width: 200px;
    height: 100px;
    background: #eee;
    line-height: 100px;
    text-align: center;
}
</style>
<body>
    <div id="ev">target element</div>
</body>
<script>
    var ev = document.getElementById('ev');

    var triggerThis = new Event('eventname');
    ev.addEventListener('eventname', function () {
        console.log('eventname');
    });

    //trigger event
    ev.dispatchEvent(triggerThis);
</script>
</html>

自定义事件带传参数

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<style>
    #ev {
        width: 200px;
        height: 100px;
        background: #eee;
        line-height: 100px;
        text-align: center;
    }
</style>

<body>
    <div id="ev">target element</div>
</body>
<script>
    var ev = document.getElementById('ev');

    var triggerThis = new CustomEvent('eventname', { 'detail': 'dataContent' });
    ev.addEventListener('eventname', function (e) {
        console.log(e.detail);
    });

    ev.dispatchEvent(triggerThis);
</script>

</html>

</html>