js 动态给元素添加、移除事件的实现方法
最近项目中要要到js动态给给元素绑定事件,刚好之前没用到过这些,顺便学习一下,于是google了一下事件,写了如下两个事件一个添加事件,一个是移除事件
/addEventListener(),removeEventListener()用于处理指定和删除事件处理程序的操作 //作用域:事件处理程序会在其所属元素的作用域内运行 //addEventListener(event,function,capture/bubble);removeEventListener(event,function,capture/bubble) //参数event如上表所示,function是要执行的函数,capture与bubble分别是W3C制定得两种时间模式, //简单来说capture就是从document的开始读到最后一行,再执行事件,而bubble则是先寻找指定的位置再执行事件. //capture/bubble的参数是布尔值,True表示用capture,False则是bubble functionaddEvent(){ varobj=document.getElementById("txtIataCity"); if(window.addEventListener){ //其它浏览器的事件代码:Mozilla,Netscape,Firefox //添加的事件的顺序即执行顺序//注意用addEventListener添加带on的事件,不用加on obj.addEventListener('focus',function(){test('aa')},false); } else{ //IE的事件代码在原先事件上添加add方法 obj.attachEvent('onfocus',function(){test('aa')}); } } functionremoveEvnent(){ varobj=document.getElementById("txtIataCity"); if(window.removeEventListener){ obj.removeEventListener('focus',function(){test('aa')},false); } else{ obj.detachEvent('onfocus',function(){test('aa')}); } }
页面加载的时候调用上述方法给input绑定事件,测试添加成功,可是移除始终不成功。于是网上找参考资料
//通过addEventListener()添加的事件只能通过removeEventListener()来移除.是这样做的啊下面还有一句://移除时addEventListener()添加的匿名函数将无法移除问题找到了function(){test('aa')}//无效,因为传入addEventListener()和removeEventListener()的方法不是同一个方法于是将test('aa')提出来写成functiontest(msg){alert(msg)}改写成functionaddEvent(){varobj=document.getElementById("txtIataCity"); if(window.addEventListener){ //其它浏览器的事件代码:Mozilla,Netscape,Firefox //添加的事件的顺序即执行顺序//注意用addEventListener添加带on的事件,不用加on obj.addEventListener('focus',test('msg')},false); } else{ //IE的事件代码在原先事件上添加add方法 obj.attachEvent('onfocus',test('msg')}); } } functionremoveEvnent(){ varobj=document.getElementById("txtIataCity"); if(window.removeEventListener){ obj.removeEventListener('focus',test('msg')},false); } else{ obj.detachEvent('onfocus',test('msg')); } }
于是乎执行ie提示:类型不匹配 看样子是不支持带参数的函数于是再次将函数封装成无参形式传入
执行,添加成功,移除还是失败。在网上找了半天差不多都是这样写的都成功了,不知道为什么我的就移除不了。
后来看页面中本来就引用了jquery于是采用jquery的bind和unbind事件一次成功。
唉,等项目完了把这个问题解决掉。
以上这篇js动态给元素添加、移除事件的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持毛票票。