DOM事件对象 -- dom事件流 -- 阻止默认事件 -- 阻止冒泡 -- 事件委托

忧郁火龙果

于 2022-06-20 19:58:03 发布

阅读量430

点赞数

分类专栏： JS基础文章标签： javascript

本文链接：https://blog.youkuaiyun.com/LQlove1/article/details/125368788

版权

JS基础专栏收录该内容

48 篇文章

订阅专栏

本文详细解读了DOM事件流的工作机制，包括捕获与冒泡的区别，以及事件对象的使用和常见属性方法。重点讲解了`event.preventDefault()`阻止默认行为和`event.stopPropagation()`阻止冒泡的应用。还介绍了事件委托的概念，通过实例演示了如何简化大量元素的事件处理。适合深入理解JavaScript事件处理的开发者。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、什么是dom事件流

页面接收事件的顺序就是dom事件流

从外到内就是捕获事件
从内到外就是事件冒泡
js代码只能执行一个事件，要么是捕获要么是冒泡
当addEventListener（）第三个值为true时，执行的时事件捕获，当为false的时候是事件冒泡
如图：

代码演示（事件捕获）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        .out{
            margin-top: 200px;
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            display: flex;
            align-items: center;
        }
        .in{
            width: 100px;
            height: 100px;
            background-color: aqua;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="out">
        <div class="in">我是内层</div>
    </div>
    <script>
        var out = document.querySelector('.out');
        var ins = document.querySelector('.in');
        out.addEventListener('click' , fn1 , true);
        ins.addEventListener('click' , fn2 , true);
        // 当第三个值为true时，执行的是事件捕获
        function fn1 (){
            alert('我是外层盒子');
        }
        function fn2 (){
            alert('我是内层盒子');
        }
    </script>
</body>
</html>

展示结果：

请添加图片描述

代码演示（事件冒泡）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        .out{
            margin-top: 200px;
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            display: flex;
            align-items: center;
        }
        .in{
            width: 100px;
            height: 100px;
            background-color: aqua;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="out">
        <div class="in">我是内层</div>
    </div>
    <script>
        var out = document.querySelector('.out');
        var ins = document.querySelector('.in');
        out.addEventListener('click' , fn1 , false);
        ins.addEventListener('click' , fn2 , false);
        // 当第三个值为false时，执行的是事件捕获
        function fn1 (){
            alert('我是外层盒子');
        }
        function fn2 (){
            alert('我是内层盒子');
        }
    </script>
</body>
</html>

展示结果：
请添加图片描述

二、什么是事件对象

可以理解为方法函数里面的形参，但是不需要我们传实参

如图：
请添加图片描述

三、常用的事件对象的属性和方法总结

e.target ---- 返回触发事件的对象 — 没试过
e.srcElement ---- 返回触发事件的对象 ---- ie9一下使用
e.type ---- 返回事件的类型
e.cancelBubble ---- 阻止冒泡 ---- ie9以下使用
e.returnValue ---- 阻止默认事件（默认行为）---- ie9一下使用
e.preventDefault ---- 阻止默认事件（默认事件）
e.stopPropagation ---- 阻止冒泡

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>使用事件对象的属性和方法</button>  
    <script>
        var btn = document.querySelector('button');
        // 按钮添加事件
        btn.addEventListener('click' , fn , false);
        function fn (event){
            console.log(event);
            console.log(event.target);
            console.log(event.type);
        }
    </script>  
</body>
</html>

展示结果：
请添加图片描述

四、 e.preventDefault（） ---- 阻止默认事件（重点）

**要求：**使a标签默认点击跳转失效

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=\, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href="http://www.baidu.com">点击我不会跳转</a>
    <script>
        var a = document.querySelector('a');
        a.addEventListener('click', fn);
        function fn(e){
            // 阻止默认事件的方法
            e.preventDefault();
        }
    </script>
</body>
</html>

五、 e.stopPropagation（） ---- 阻止冒泡（重点）

**要求：**给两个盒子添加事件，用事件冒泡的顺序执行，阻止父盒子的事件，点击子盒子父盒子不会执行
代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        .out{
            margin-top: 200px;
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            display: flex;
            align-items: center;
        }
        .in{
            width: 100px;
            height: 100px;
            background-color: aqua;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="out">
        <div class="in">我是内层</div>
    </div>
    <script>
        var out = document.querySelector('.out');
        var ins = document.querySelector('.in');
        out.addEventListener('click' , fn1 , false);
        ins.addEventListener('click' , fn2 , false);
        // 当第三个值为false时，执行的是事件冒泡
        function fn1 (e){
            alert('我是外层盒子');
        }
        function fn2 (e){
            alert('我是内层盒子');
            // 阻止冒泡
            e.stopPropagation();
        }
    </script>
</**加粗样式**body>
</html>

六、事件委托

1. 什么是事件委托
比如要给ul下面的很多个li添加事件，可以遍历循环给每一个注册事件，但是还有更简单的方法。利用事件冒泡给ul一个元素注册事件，点击li的时候，从内到外，从子到父，点击li就会触发给ul注册的事件。

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>点击变成红色</li>
        <li>点击变成红色</li>
        <li>点击变成红色</li>
        <li>点击变成红色</li>
        <li>点击变成红色</li>
    </ul>
    <script>
        var ul = document.querySelector('ul');
        var lis = document.querySelectorAll('li');
        // 把要给li的功能委托给ul
        ul.addEventListener('click' , changeColor , false);
        function changeColor(e){
            for(var i = 0 ; i < lis.length ; i++ ){
                lis[i].style.backgroundColor = '';
            }
            e.target.style.backgroundColor = 'red';
        }
    </script>
</body>
</html>