欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

给dom元素添加事件的监听

程序员文章站 2022-06-20 10:54:15
...

一、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>

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>

不能用（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>

上一篇： 中医强烈推荐！三伏天吃这些瓜最解暑

下一篇： Vue动态给一个元素添加类名，兄弟元素移除类名

推荐阅读