JavaScript事件监听（attachEvent、 addEventListener）

最新推荐文章于 2023-08-17 16:26:32 发布

大叶豌豆

最新推荐文章于 2023-08-17 16:26:32 发布

阅读量1k

点赞数 1

分类专栏： javascript 文章标签： JavaScript 事件监听对象 js

本文链接：https://blog.csdn.net/dayewandou/article/details/78311498

版权

javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

事件监听：同一个事件绑定多个事件处理程序
IE：（IE8及以下查看效果）
对象.attachEvent(‘事件（on）’，‘事件处理程序’) 添加事件
对象.detachEvent(‘事件（on）’，‘事件处理程序’) 删除事件

案例：给一个div绑定两个处理程序，查看执行顺序（需要在IE8下查看效果）

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background: deeppink;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <script>
        var box=document.querySelector('.box');
        box.attachEvent('onclick',aa);
        box.attachEvent('onclick',bb);
        function aa(){
            alert('这个是aa处理程序！');
        }
        function bb(){
            alert('这个是bb处理程序！');
        }
    </script>
</body>
</html>

显示效果：
这里写图片描述

注：事件执行的时候先执行bb后执行的aa

想要删除事件的话可以用detachEvent

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background: deeppink;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <script>
        var box=document.querySelector('.box');
        box.attachEvent('onclick',aa);
        box.attachEvent('onclick',bb);
        box.detachEvent('onclick',bb);//删除bb处理程序
        function aa(){
            alert('这个是aa处理程序！');
        }
        function bb(){
            alert('这个是bb处理程序！');
        }
    </script>
</body>
</html>

显示效果：
这里写图片描述

说了这个还有一个另外一个事件监听
FF（兼容谷歌、火狐、IE8以上）
addEventListener(‘事件’，‘处理程序’，布尔值) 添加
removeEventListener(‘事件’，‘处理程序’，布尔值) 删除

案例：给一个div绑定两个处理程序，查看执行顺序（IE8以下不支持）

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background: deeppink;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <script>
        var box=document.querySelector('.box');
        box.addEventListener('click',aa,false);
        box.addEventListener('click',bb,false);
        function aa(){
            alert('这个是aa处理程序！');
        }
        function bb(){
            alert('这个是bb处理程序！');
        }
    </script>
</body>
</html>

显示效果：
这里写图片描述

点击div先触发aa，然后触发bb

注意：addEventListener方法可以为当前对象的同一事件，添加多个监听函数，这些函数按照添加的顺序触发，即先添加先触发，如果为同一个事件多次添加同一个监听函数，该函数只会执行一次，多余的添加将自动被去除（不必使用removeEventListener方法手动去除）

案例：删除事件监听

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background: deeppink;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <script>
        var box=document.querySelector('.box');
        box.addEventListener('click',aa,false);
        box.addEventListener('click',bb,false);
        box.removeEventListener('click',bb,false);//删除bb
        function aa(){
            alert('这个是aa处理程序！');
        }
        function bb(){
            alert('这个是bb处理程序！');
        }
    </script>
</body>
</html>