给dom元素添加事件的监听_dom元素添加监听事件

作者：你好赵伟 | 2024-03-12 08:02:21

踩

dom元素添加监听事件

一、addEventListener给dom元素添加事件的监听有两种方式
1.用匿名函数方式添加事件的监听
例

<head lang="en">
    <meta charset="UTF-8">
    <title></title>

</head>
<body>
<button class="classname">按钮</button>
<button class="classname">按钮</button>
<button class="classname">按钮</button>
<button class="classname">按钮</button>
<button class="classname">按钮</button>

<script>
    var btnlist=document.getElementsByClassName("classname");
for(var i=0;i<btnlist.length;i++){
    btnlist[i].addEventListener("click",  function(){
        console.log("my");
    })
}
</script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

2.用外部函数添加事件的监听
例

<script>
    var btnlist=document.getElementsByClassName("classname");
for(var i=0;i<btnlist.length;i++){
    btnlist[i].addEventListener("click",btnvase);
    //是取函数的名称，而不是调用函数；即只能写该函数的名称btnvase，不能写成btnvase()；
    function btnvase(){
        console.log("my");
    }
}
</script>

1
2
3
4
5
6
7
8
9
10
11

不能用（var btnvase=function（）{}的函数形式添加事件的监听，此函数没有预编译功能）
二、removeEventListener移除事件句柄
在使用removeEventListener移除事件句柄时，addEventListener使用的函数必须是外部函数，匿名函数（addEventListener(“click”,function(){ })）是无法移除的。
例：

<script>
    var btnlist=document.getElementsByClassName("classname");
for(var i=0;i<btnlist.length;i++){
    btnlist[i].addEventListener("click",btnvase);
    function btnvase(){
        console.log("my");
        this.removeEventListener("click",btnvase);//this指在当前事件里面执行的对象
    }
}
</script>
1
2
3
4
5
6
7
8
9
10

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/你好赵伟/article/detail/223131