事件监听

最新推荐文章于 2024-07-16 20:08:38 发布

斗弟

最新推荐文章于 2024-07-16 20:08:38 发布

阅读量513

点赞数 2

CC 4.0 BY-SA版权

分类专栏：事件文章标签：事件监听与捕获事件监听器事件捕获

本文链接：https://blog.youkuaiyun.com/L_Lintellect/article/details/99321895

事件专栏收录该内容

3 篇文章

订阅专栏

本文深入探讨了事件监听器的概念及其在混合开发中的应用，详细解析了W3C标准写法与IE8及以下版本的事件绑定方法，以及如何通过事件监听解决多人合作时的代码冲突问题。同时，文章还介绍了事件的捕获与冒泡机制，并提供了具体的代码示例。

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

事件监听与捕获

事件监听器，是什么，是监听事件的函数，给节点绑定事件监听器，当监听到有事件时就立即调用处理函数。混合开发用，安全。

实例：

//html结构，通过一个按钮来体验一波。 
<input type="button" value="点击" id="btn">

A,B两个人混合开发这个按钮的不同功能；

btn.onclick = function () {
    alert('A同学的功能');
}

btn.onclick = function () {//最终起作用的是这句
    alert('B同学的功能');
}

当项目完成时，需要合并代码，假如把他们的代码写在一起，当点击btn按钮时。那么，谁的代码写在后面谁的就有作用的那个，此时A同学可能要完蛋了，项目经理说：你的绩效没了，你什么都没做。

这个时候，我们就需要事件监听来让各自写的功能都能够执行。

事件监听器

w3c标准写法

节点.addEventListener('event', fn, true | false);

event: 第一个参数，事件名称，不带 on，要有引号

fn：事件处理函数，也就是功能部分，可外置。

第三参数：bool值，是否捕获，false:（不捕获）冒泡 true:捕获(反冒泡)

IE8- 的写法

attchEvnet(“带on的事件名”，回调函数)

运用事件监听来解决A、B同学的问题。

        btn.addEventListener('click', function () {
            alert('A同学的功能');
        }, false);

        btn.addEventListener('click', function () {
            alert('B同学的功能');
        }, false);

这样子的话A、B同学的功能都能够实现了。（谁在前先执行谁的）

移除事件监听事件

有绑定就肯定有解绑，方法为：

W3C标准：ele.removeEventListener(‘click’,fn, true)传入的所有参数(包括函数)必须与事件监听器中一致，否则不能移除事件
IE8-：ele.detachEvent(‘onclick’,fun)，传入的参数fun要跟添加时一样，否则不能移除事件

页面事件绑定数量越多，越影响性能（速度越慢）

注意：解绑的时候需要注意的是，要通过函数句柄的方式传入参数，直接写完整的function进去是解绑不了得的

正确写法为

function oneTest() {
    alert('A同学的功能');
}
btn.addEventListener('click', oneTest);
btn.addEventListener('click', function(){
    alert('B同学的功能');
});
btn.removeEventListener('click', oneTest); //解除A同学功能，A的弹窗不会弹出
//此处我没写有第三个参数，写不写看个人。

事件捕获

事件捕获就是一个反冒泡的过程，捕获方向由外到内，是否捕获为事件监听器的第三个参数。

在这里插入图片描述
先捕捉，先输出，不捕捉冒泡顺序输出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件的捕获</title>
    <style>
        div,
        span {display: block;padding: 50px;}
    </style>
</head>

<body>
    <div id="father" style="background: forestgreen">
        <span id="son" style="background: gold"></span>
    </div>
</body>
<script>
    (function () {
        var father = document.getElementById('father');
        var son = document.getElementById('son');
        //事件绑定
        window.addEventListener('click', function () {
            console.log('window');
        }, true);

        son.addEventListener('click', function () {
            console.log('span');
        }, false);//false:冒泡  true:捕获(反冒泡)

        father.addEventListener('click', function () {
            console.log('div');
        }, false);

        document.body.addEventListener('click', function () {
            console.log('body');
        }, false);

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