事件对象，事件流（事件冒泡和事件捕获）、事件委托、L0和L2注册等相关概念及用法

最新推荐文章于 2023-04-18 14:03:46 发布

铃儿响叮当不响

最新推荐文章于 2023-04-18 14:03:46 发布

阅读量2.3k

点赞数

分类专栏：前端js笔记文章标签：前端 html javascript

本文链接：https://blog.csdn.net/qq_36507046/article/details/125828030

版权

前端js笔记专栏收录该内容

43 篇文章 7 订阅

订阅专栏

事件对象

1. 事件对象是什么？

这个对象包含事件触发时的相关信息。如：鼠标点击事件中，事件对象就存了鼠标点击时的位置信息等。

2. 事件对象在哪里？

在事件绑定的回调函数的第一个参数就是事件对象，一般命名为event，e，ev等

语法：元素.addEventListener('click',function(e){})

<!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>
        let btn = document.querySelector('button')
        btn.addEventListener('click',function(event){
             console.log(event)
        })
    </script>
</body>
</html>

3. 获取事件对象

部分常用属性

type 获取当前的事件类型

clientX /clientY 获取光标相对于浏览器可见窗口左上角的位置

pageX/pageY获取文档坐标（用的更多）

offsetX / offsetY 获取光标相对于当前DOM元素左上角的位置

key 用户按下的键盘值的值（现在不提倡使用keyCode）

<!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>
        img {
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <img src="./image/hudie.gif">
    <script>
        let img = document.querySelector('img')
        document.addEventListener('mousemove',function(event){
        //   不断得到当前的鼠标坐标
        //   console.log(event.pageX)
        //   console.log(event.pageY)
        //   把坐标给图片 默认鼠标在左上角 使得鼠标在正中间 横纵坐标均减去图片的一半即可
         img.style.left = event.pageX -200 + 'px'
         img.style.top =  event.pageY -200 + 'px'
        })
    </script>
</body>
</html>

4. 事件流（重要）

事件流：事件完整执行过程中的流动路径

事件流会经历两个阶段：捕获阶段和冒泡阶段

捕获阶段：从父到子冒泡阶段：从子到父

事件冒泡的概念

当一个元素的事件被触发时，同样的事件会在该元素的所有祖先元素中依次被触发，这一过程被称为事件冒泡。即当一个元素触发事件后，会依次向上调用所有父级元素的同名事件。而且事件冒泡是默认存在的。

会依次向上调用所有父级元素的同名事件

<!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>
        .father {
            margin: 100px auto;
            width: 500px;
            height: 500px;
            background-color: pink;
        }
        .son {
            width: 200px;
            height: 200px;
            background-color: purple;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">
        </div>
    </div>
    <script>
           let fa = document.querySelector('.father')
           let son = document.querySelector('.son')
         fa.addEventListener('click',function(){
            alert('我是爸爸')
         })
         son.addEventListener('click',function(){
            alert('我是儿子')
         })
        // 页面单击 会依次冒泡
         document.addEventListener('click',function(){
            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>
        .father {
            margin: 100px auto;
            width: 500px;
            height: 500px;
            background-color: pink;
        }
        .son {
            width: 200px;
            height: 200px;
            background-color: purple;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">
        </div>
    </div>
    <script>
           let fa = document.querySelector('.father')
           let son = document.querySelector('.son')
         // 若设定为true则为捕获阶段,与冒泡阶段执行顺序相反
         fa.addEventListener('click',function(){
            alert('我是爸爸')
         })
         son.addEventListener('click',function(){
            alert('我是儿子')
         })
        // 只会冒泡单击事件双击事件不冒泡（不同名）
         document.addEventListener('dblclick',function(){
            alert('我是爷爷')
         })
    </script>
</body>
</html>

事件捕获概念

从DOM的根元素开始去执行对应的事件从外到里（从父到子）

DOM.addEventListener(事件类型，事件处理函数，是否使用捕获机制)

若使用false代表冒泡阶段触发，默认就是false

tue代表的是捕获阶段 (很少使用)与事件冒泡正好相反

<!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>
        .father {
            margin: 100px auto;
            width: 500px;
            height: 500px;
            background-color: pink;
        }
        .son {
            width: 200px;
            height: 200px;
            background-color: purple;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">
        </div>
    </div>
    <script>
           let fa = document.querySelector('.father')
           let son = document.querySelector('.son')
         // 若设定为true则为捕获阶段,与冒泡阶段执行顺序相反
         fa.addEventListener('click',function(){
            alert('我是爸爸')
         },true)
         son.addEventListener('click',function(){
            alert('我是儿子')
         },true)
        // 页面单击 会依次冒泡
         document.addEventListener('click',function(){
            alert('我是爷爷')
         },true)
    </script>
</body>
</html>

5. 阻止事件流动（重要）

由于默认就有冒泡模式存在，所以容易导致事件影响到父级元素

若想要把事件限制在当前元素内，就需要阻止事件流动，阻止事件流动需要拿到事件对象

语法：事件对象.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>
        .father {
            margin: 100px auto;
            width: 500px;
            height: 500px;
            background-color: pink;
        }
        .son {
            width: 200px;
            height: 200px;
            background-color: purple;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">
        </div>
    </div>
    <script>
        let fa = document.querySelector('.father')
        let son = document.querySelector('.son')
        fa.addEventListener('click',function(){
            alert('我是爸爸')
            event.stopPropagation()
         })
        son.addEventListener('click',function(event){
        alert('我是儿子')
        // 阻止事件流动
        event.stopPropagation()
         })
         document.addEventListener('click',function(){
            alert('我是爷爷')
         })
    </script>
</body>
</html>

鼠标经过事件：

mouseover 和 mouseout 会有冒泡效果（会影响父级元素）

mouseenter和mouseleave 没有冒泡效果（推荐）

<!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>
        .father {
            margin: 100px auto;
            width: 500px;
            height: 500px;
            background-color: pink;
        }
        .son {
            width: 200px;
            height: 200px;
            background-color: purple;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">
        </div>
    </div>
    <script>
           let fa = document.querySelector('.father')
           let son = document.querySelector('.son')
           fa.addEventListener('mouseenter',function(){
            console.log(11)
        })   
    </script>
</body>
</html>

6. 阻止默认行为：比如链接不跳转，表单域不提交

语法：e.preventDefault()

<!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>
    <a href="http://www.baidu.com">跳转到百度</a>
<script>
    let a = document.querySelector('a')
    a.addEventListener('click',function(event){
        // 阻止默认行为方法
        event.preventDefault()
    })
</script>
</body>
</html>

7. 两种注册事件的区别（重要）

1、传统on注册（L0）

同一个对象，后面注册的事件会覆盖前面注册（同一个事件）

直接使用null覆盖就可以实现事件的解绑 btn.onclick = null

都是冒泡阶段执行的

<!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>
        let btn = document.querySelector('button')
        btn.onclick = function(){
            alert('第一次点击')
        }
        // 第二次点击事件会覆盖前一次的事件
        btn.onclick = function(){
            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>
</head>
<body>
    <button>点击</button>
    <script>
        let btn = document.querySelector('button')
        btn.onclick = function(){
            alert('第一次点击')
        }
        // 第二次点击事件会覆盖前一次的事件
        btn.onclick = function(){
            alert('第二次点击')
        }
        // 解除事件绑定
        btn.onclick = null
    </script>
</body>
</html>

2、事件监听注册（L2）

语法：addEventListener(事件类型，事件处理函数，是否使用捕获)

后面注册的事件不会覆盖前面注册的事件（同一个事件）

可以通过第三个参数去确定是在冒泡或者捕获阶段执行

必须使用removeEventListener(事件类型，事件处理函数，获取捕获或者冒泡阶段)

匿名函数没法解绑，因此如果需要解绑

<!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>
        let btn = document.querySelector('button')
        btn.addEventListener('click',function(){
            alert('11')
        })
        btn.addEventListener('click',aa)
        function aa() {
            alert('22')
        }
    </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>
</head>
<body>
    <button>点击</button>
    <script>
        let btn = document.querySelector('button')
        btn.addEventListener('click',function(){
            alert('11')
        })
        btn.addEventListener('click',aa)
        function aa() {
            alert('22')
        }
        btn.removeEventListener('click',aa)
    </script>
</body>
</html>

8. 事件委托（重点）

事件委托是利用事件流的特征解决一些开发需求的知识技巧

优点：给父级元素加事件（可以提高性能）

原理：事件委托就是利用事件冒泡的特点，给父级元素添加事件，子元素可以触发

实现：事件对象.target可以获得真正触发事件的元素

e.target.tagName 可以得到触发事件元素的名字

<!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>我是第1个</li>
        <li>我是第2个</li>
        <li>我是第3个</li>
        <li>我是第4个</li>
        <li>我是第5个</li>
    </ul>
    <script>
        // 不要每个小li注册事件 而是把事件委托给他的爸爸
        // 事件委托是给父级添加事件 而不是给孩子添加事件
        let ul = document.querySelector('ul')
        ul.addEventListener('click',function(e){
            // 如何得到当前的元素 console.log(e.target)
           e.target.style.color = 'red'
        })
    </script>
</body>
</html>