javascript绑定的事件在什么情况下要解除绑定

 我来答

1个回答

#热议# 为什么说不要把裤子提到肚脐眼？

分享快乐555

2017-06-23 · 传递知识，造就未来，你的所得，我的快乐！

分享快乐555

采纳数：4647 获赞数：12337

向TA提问私信TA

关注

展开全部

1.1 绑定事件：对象.事件=事件处理函数

<!doctype html>
<html>
<head>
<style type="text/css">
#div1{
width:200px;
height:200px;
background:pink;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div id="div1"></div>
<button type="button" id="btn1">绑定事件</button>
<button type="button" id="btn2">移除事件</button>
</body><br><script type="text/javascript"><br>var btn1= document.getElementById("btn1");<br>btn1.onclick = function(){<br>alert(1);<br>}<br></script>
</html>

1.2 解除事件：对象.事件=null (此方法就是函数的覆盖)

<script type="text/javascript">
var btn1= document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
btn1.onclick = function(){
alert("btn1事件绑定成功！");
}
btn2.onclick = function(){
btn1.onclick =null;
alert("btn1所绑定的事件已经被移除！");
}
</script>
　　运行结果：在开始是，点击“绑定事件”按钮，会弹出一个提示框“btn1事件绑定成功！”，当点击“移除事件”按钮时，btn1所绑定的事件就已经移除了，并弹出提示

使用 attachEvent 、detachEvent、addEventListener 与 removeEventListener
2.1 事件绑定------attachEvent ，addEventListener
使用 attachEvent 和 addEventListenter 的好处就是，可以多次的进行事件的绑定，不向原始的方法那样，前面绑定的事件将会被后面的绑定的事件所覆盖，最后只能执行后面所绑定的函数。
attachEvent

<script type="text/javascript">
var btn1= document.getElementById("btn1");
btn1.attachEvent ('onclick',function(){alert('1');});
btn1.attachEvent ('onclick',function(){alert('2');});
</script>

　　运行结果：2，1
说明：attachEVent 是先绑定后执行，它将先执行我后绑定的函数。
注意：1）attachEvent 只能兼容 IE7，IE8；
2）attachEvent 绑定的事件前面要加“on”

addEventListener

<script type="text/javascript">
var btn1= document.getElementById("btn1");
btn1.addEventListener ('click',function(){alert('1');},false);
btn1.addEventListener ('click',function(){alert('2');},false);
</script>

　　
　运行结果：1，2
说明：1) addEventListener 是先绑定先执行，它将按顺序执行我绑定的事件。
2) addEventListener 的第三个参数：
布尔值参数是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序
注意：1）addEventListener 与 attachEVent 正好相反，只不兼容 IE7，IE8，其他大部分的浏览器都可以执行。
2）addEventListener 绑定的事件前面不要加“on”
2.2 事件解除------detachEvent，removeEventListener
detachEvent
<script type="text/javascript">
var fun = function(){
alert(11);
}
var btn1= document.getElementById("btn1");
var btn1= document.getElementById("btn1");
btn1.attachEvent ('onclick',fun,false);
btn1.detachEvent('onclick',fun,false);
</script>

　removeEventListener　

<script type="text/javascript">
var fun = function(){
alert(1);
}
var btn1= document.getElementById("btn1");
btn1.addEventListener('click',fun,false);
btn1.removeEventListener('click',fun,false);
</script>

　　注意：1）在removeEventListener 传入的参数与 addEventListener 传入的参数要一致，看似使用了相同的参数，但实际上，第二个参数与传入addEventListener()中的与第一个是完全不同的函数。
2）因为移除时传入的参数与添加处理程序时使用的参数相同。这也意味着通过addEventListener()添加的匿名函数无法移除。

1
2

btn1.addEventListener('click',function(){alert(1);},false);
btn1.removeEventListener('click',function(){alert(1);},false);//无效

　　 3）在公用函数体存在参数的情况下，不能将带参数的函数体传给 addEventListener 和 romoveEventListener。
错误示例：

<script type="text/javascript">

var fun = function(e){
e.preventDefault();//阻止事件目标的默认动作
alert(1);
}
var btn1= document.getElementById("btn1");
btn1.addEventListener('click',fun(event),false);
btn1.removeEventListener('click',fun(event),false);
</script>

　　正确示例：

<script type="text/javascript">
var fun = function(e){
e.preventDefault();//阻止事件目标的默认动作
alert(1);
}
var btn1= document.getElementById("btn1");
btn1.addEventListener('click',fun,false);
btn1.removeEventListener('click',fun,false);
</script>

4）detachEvent 与 removeEventListener 注意事项相同

本回答由提问者推荐

已赞过 已踩过<

评论收起

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

javascript绑定的事件在什么情况下要解除绑定

其他类似问题

为你推荐：