addEventListener和removeEventListener绑定有名函数和无名函数的区别
程序员文章站
2022-03-22 18:45:32
...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<script type="text/javascript">
Obj = {
al: function(){
alert("aaaa");
}
}
function add(){
var btn = document.getElementById("aaa");
//btn.removeEventListener("click", Obj.al, false);
btn.addEventListener("click", Obj.al, false);
}
function addAnmonys(){
var btn = document.getElementById("aaa");
btn.addEventListener("click", function(){
alert("aaaa");
}, false);
}
function remove(){
var btn = document.getElementById("aaa");
btn.removeEventListener("click", Obj.al, false);
}
</script>
<title>New Web Project</title>
</head>
<body>
<input type="button" value="aaaaaa" id="aaa" />
<br/><br/>
<input type="button" value="执行一次add" onclick="add()"/>
<br/><br/>
<input type="button" value="执行一次addAnmonys" onclick="addAnmonys()"/>
<br/><br/>
<input type="button" value="执行一次remove" onclick="remove()"/>
</body>
</html>
当使用addEventListener绑定一个有名的监听函数时，不会被重复绑定（多次绑定也只会绑定一次），也可以去绑定。
使用匿名函数时，监听函数会被多次重复绑定，也无法去绑定。