//解绑事件:
/*
* 注意:用什么方式绑定事件,就应该用对应的方式解绑事件
* 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); };
原文地址:https://www.cnblogs.com/liushisaonian/p/9363396.html
时间: 2024-10-03 22:15:24