js 任意元素解绑任意事件的兼容代码
程序员文章站
2022-04-14 17:01:52
hmtl代码: 解绑事件有三种: 注意:用什么方式绑定事件,就应该用对应的方式解绑事件 1.解绑事件(IE 谷 ......
hmtl代码:
<input type="button" value="按钮" id="btn"/> <input type="button" value="干掉第一个按钮的事件" id="btn2"/>
解绑事件有三种:
注意:用什么方式绑定事件,就应该用对应的方式解绑事件
1.解绑事件(ie 谷歌 火狐都支持 但是得对于的on事件)
对象.on事件名字=事件处理函数--->绑定事件
对象.on事件名字=null;
my$("btn").onclick=function () { console.log("我猥琐"); }; my$("btn2").onclick=function () { //1.解绑事件 my$("btn").onclick=null; };
2.解绑事件(谷歌.火狐支持 ie不支持)
对象.addeventlistener("没有on的事件类型",命名函数,false);---绑定事件
对象.removeeventlistener("没有on的事件类型",函数名字,false);
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); };
3.解绑事件(注意这个是ie支持 其他不支持)
对象.attachevent("on事件类型",命名函数);---绑定事件
对象.detachevent("on事件类型",函数名字);
function f1() { console.log("第一个"); } function f2() { console.log("第二个"); } my$("btn").attachevent("onclick",f1); my$("btn").attachevent("onclick",f2); my$("btn2").onclick=function () { my$("btn").detachevent("onclick",f1); };
为了解决ie与谷歌 火狐的兼容:
//解绑事件的兼容 //为任意的一个元素,解绑对应的事件 //element 元素 type 事件类型 fnname 事件处理的函数 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; } }