您的位置：首页 > 其它

给dom元素添加事件的监听

2019-02-23 10:28 429 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航