JavaScript事件监听器------JavaScript学习之路8

最新推荐文章于 2024-03-07 09:46:24 发布

dragoned_123

最新推荐文章于 2024-03-07 09:46:24 发布

阅读量218

点赞数

分类专栏： JavaScript 文章标签： javascript html5 css3 css

本文链接：https://blog.csdn.net/dragoned_123/article/details/107404456

版权

JavaScript 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

JavaScript的事件监听器

传统事件监听和事件监听器的区别

传统的事件监听器只会覆盖同一个标签的相同事件即：

var bt = document.getElementById("b1");
bt.onclick = function () {
    alert("事件1");
}
bt.onclick = function () {
    alert("事件2");
}

效果：
在这里插入图片描述

但是使用事件监听器后绑定相同的事件互不影响即：

bt.addEventListener("click",function () {
    alert("事件1");
},false);
bt.addEventListener("click",function () {
    alert("事件2");
},false);

在这里插入图片描述

添加事件监听器addEventListener(参数1，参数2，参数3)

参数1：填写事件类型 click、mouseover、mousedown、、、
参数2：填写事件处理匿名函数或者函数名字
参数3：填写false（默认）或者true false是事件冒泡，true是事件捕获

移除事件监听器removeEventListener(参数1，参数2)

参数1：填写事件类型 click、mouseover、mousedown、、、
参数2：填写事件处理函数的名字

兼容性问题

由于IE一下版本不兼容所以做一个封装函数

function addEvent(node,eventType,funNmae,bool=false) {
    if(node.addEventListener){
        node.addEventListener(eventType,funNmae,bool);
    }else{
        node.attachEvent("on"+eventType,funNmae);
    }
}

function removeEvent(node,eventType,funNmae,bool=false) {
    if(node.removeEventListener){
        node.removeEventListener(eventType,funNmae,bool);
    }else{
        node.detachEvent("on"+eventType,funNmae);
    }
}

案例

添加3个按钮，第一个按钮绑定原有的函数，第二个函数绑定一个事件实现对第一个按钮添加第二个函数，第三个按钮用来移除第一个按钮的第二个按钮添加的函数

效果

在这里插入图片描述

完整源码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>事件监听器</title>
    <style>
        html{
            display: flex;
            justify-content: center;
            align-items: center;
        }
        body{
            margin-top: 200px;
        }
    </style>
</head>
<body>
<button id="b1">点击1</button>
<button id="b2">点击2</button>
<button id="b3">点击3</button>
<script>
    var bt1 = document.getElementById("b1");
    var bt2 = document.getElementById("b2");
    var bt3 = document.getElementById("b3");
    bt1.addEventListener("click",function () {//添加原有事件
        alert("点击一原有点击事件");
    },false);

    bt2.addEventListener("click",function () {//添加事件使得点击1添加新事件
        bt1.addEventListener("click",doit,false);
    },false);

    bt3.addEventListener("click",reDoit,false);//添加事件来移除点击1的新事件

    function doit() {
        alert("点击2添加给我的点击事件");
    }

    function reDoit() {
        bt1.removeEventListener("click",doit);
    }
    // bt.onclick = function () {
    //     alert("事件1");
    // }
    // bt.onclick = function () {
    //     alert("事件2");
    // }
    // bt.addEventListener("click",function () {
    //     alert("事件1");
    // },false);
    // bt.addEventListener("click",function () {
    //     alert("事件2");
    // },false);

</script>
</body>
</html>

dragoned_123

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript事件监听器------JavaScript学习之路8

JavaScript的事件监听器传统事件监听和事件监听器的区别传统的事件监听器只会覆盖同一个标签的相同事件即：var bt = document.getElementById("b1");bt.onclick = function () { alert("事件1");}bt.onclick = function () { alert("事件2");}效果：但是使用事件监听器后绑定相同的事件互不影响即：bt.addEventListener("click",functi
复制链接

扫一扫