「本文已参与好文召集令活动，点击查看：后端、大前端双赛道投稿，2万元奖池等你挑战！」

DOM事件类

1：基本概念：DOM事件的级别

2：DOM事件模型

3：DOM事件流

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

流程图示

代码

   <style>
            * {
                margin: 0;
                padding: 0;
            }

            #margin {
                width: 300px;
                height: 300px;
                background-color: red;
                color: black;
                text-align: center;
                line-height: 100px;
            }
        </style>
        <section id="margin">
            目标元素
        </section>
        <script>
            var margin = document.getElementById('margin');
            window.addEventListener('click', function () {
                console.log('window captrue');
            }, true);
            // true捕获触发，false冒泡触发
            document.addEventListener('click', function () {
                console.log('document captrue');
            }, true);
            document.documentElement.addEventListener('click', function () {
                console.log('html captrue');
            }, true);
            document.body.addEventListener('click', function () {
                console.log('body captrue');
            }, true);
            margin.addEventListener('click', function () {
                console.log('margin captrue');
            }, true);
        </script>

图解

5：Event对象的常见应用

1：组织默认事件，如阻止a标签跳转

2：阻止冒泡

3：两个事件，在A事件上加这句话，会阻止B事件响应。类似于给A设置优先级大于B

4：当前绑定的事件

5：当前被点击元素

6：自定义事件

1：new Event('事件名')自定义事件

2：1中做不到传参，想传参可以用CustomEvent。后跟objeck指定参数 案例

<style>
       <style>
            * {
                margin: 0;
                padding: 0;
            }

            #margin {
                width: 300px;
                height: 300px;
                background-color: red;
                color: black;
                text-align: center;
                line-height: 100px;
            }
        </style>
        <section id="margin">
            目标元素
        </section>
        <script>
            var margin = document.getElementById('margin');
            var sb = new Event('test');
            margin.addEventListener('test', function () {
                console.log('test dispatch');
            })
            setTimeout(function () {
                margin.dispatchEvent(sb)
                // 此处不是事件名，是事件对象
            }, 2000)
        </script>

本文总结了dom的一些东西，没有那么细。但能帮你把知识点联系起来。