//解绑事件:
?/*
?* 注意:用什么方式绑定事件,就应该用对应的方式解绑事件
?* 1.解绑事件
?* 对象.on事件名字=事件处理函数--->绑定事件
?* 对象.on事件名字=null;
?* 2.解绑事件
?* 对象.addEventListener("没有on的事件类型",命名函数,false);---绑定事件
?* 对象.removeEventListener("没有on的事件类型",函数名字,false);
?* 3.解绑事件
?* 对象.attachEvent("on事件类型",命名函数);---绑定事件
?* 对象.detachEvent("on事件类型",函数名字);
?*
?*
?* */
页面
<!DOCTYPE html><html lang="en"><head> ?<meta charset="UTF-8"> ?<title>title</title></head><script >function ?my$(id){return document.getElementById(id);}//设置任意元素的中间的文本内容function setInnnerText(element,text) { ???if(typeof element.textContent=="undefined"){ ???????element.innerText=text; ???}else{ ???????element.textContent=text; ???}}</script><body><input type="button" value="创建一个p" id="btn"/>哈哈哈<input type="button" value="创建二个p" id="btn2"/><div id=‘dv‘> </div></html>
绑定和解绑的兼容性代码
<!DOCTYPE html><html lang="en"><head> ?<meta charset="UTF-8"> ?<title>title</title><script >function ?my$(id){return document.getElementById(id);}//设置任意元素的中间的文本内容function setInnnerText(element,text) { ???if(typeof element.textContent=="undefined"){ ???????element.innerText=text; ???}else{ ???????element.textContent=text; ???}}</script></head><body><input type="button" value="按钮" id="btn1"/><input type="button" value="干掉第一个按钮的事件" id="btn2"/><script> ?//绑定事件的兼容 ?function addEventListener(element,type,fn) { ???if(element.addEventListener){ ?????element.addEventListener(type,fn,false); ???}else if(element.attachEvent){ ?????element.attachEvent("on"+type,fn); ???}else{ ?????element["on"+type]=fn; ???} ?} ?//解绑事件的兼容 ?//为任意的一个元素,解绑对应的事件 ?function removeEventListener(element,type,fnName) { ???if(element.removeEventListener){ ?????element.removeEventListener(type,fnName,false); ???}else if(element.detachEvent){ ?????element.detachEvent("on"+type,fnName); ???}else{ ?????element["on"+type]=null; ???} ?} ?function f1() { ???console.log("第一个"); ?} ?function f2() { ???console.log("第二个"); ?} ?addEventListener(my$("btn1"),"click",f1); ?addEventListener(my$("btn1"),"click",f2); ?my$("btn2").onclick=function () { ???removeEventListener(my$("btn1"),"click",f1); ?};</script></body></html>
第一种方式是常用的
my$("btn").onclick=function(){console.log("aa");}my$("btn").onclick=null;
第二种方式是常用的(火狐谷歌)
/第二种方式支持谷歌和火狐,不支持ie8 ?function f1() { ???console.log("第一个"); ?} ?function f2() { ???console.log("第二个"); ?} ?my$("btn").addEventListener("click",f1,false); ?my$("btn").addEventListener("click",f2,false); ?//点击第二个按钮把第一个按钮的第一个点击事件解绑 ?my$("btn2").onclick=function () { ???//解绑事件的时候,需要在绑定事件的时候,使用命名函数 ???my$("btn").removeEventListener("click",f1,false); ?};
第三种方式是常用的(IE8)
//第三种支持ie8 ???function f3() { ???console.log("第一个"); ?} ?function f4() { ???console.log("第二个"); ?} ?my$("btn").attachEvent("onclick",f3); ?my$("btn").attachEvent("onclick",f4); ?my$("btn2").onclick=function () { ?????my$("btn").detachEvent("onclick",f3); ?};
js中的解绑事件
原文地址：https://www.cnblogs.com/liushisaonian/p/9363396.html