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
function addEvent() {
var obj = ElementById("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')});
}
}
function removeEvnent() {
var obj = ElementById("txtIataCity");
if (veEventListener) {
}
else {
obj.detachEvent('onfocus', function(){test('aa')});
}
}
页⾯加载的时候调⽤上述⽅法给input绑定事件，测试添加成功，可是移除始终不成功。于是⽹上参考资料
//通过addEventListener()添加的事件只能通过removeEventListener()来移除. 是这样做的啊下⾯还有⼀句：//移除时addEventListener()添加的匿名函数将⽆法移除问题到了 function(){test('aa')}//⽆效，因为
传⼊addEventListener()和removeEventListener()的⽅法不是      if (window.addEventListener) {
//其它浏览器的事件代码: Mozilla, Netscape, Firefox
//添加的事件的顺序即执⾏顺序 //注意⽤ addEventListener 添加带on的事件，不⽤加on
obj.addEventListener('focus', test('msg')} , false);
}
else {
//IE 的事件代码在原先事件上添加 add ⽅法
obj.attachEvent('onfocus', test('msg')});
}
}
js获取子元素function removeEvnent() {
var obj = ElementById("txtIataCity");
if (veEventListener) {
}
else {
obj.detachEvent('onfocus',test('msg'));
}
}
于是乎执⾏ ie提⽰：类型不匹配看样⼦是不⽀持带参数的函数于是再次将函数封装成⽆参形式传⼊
执⾏，添加成功，移除还是失败。在⽹上了半天差不多都是这样写的都成功了，不知道为什么我的就移除不了。
后来看页⾯中本来就引⽤了jquery 于是采⽤jquery的bind 和unbind 事件⼀次成功。
唉，等项⽬完了把这个问题解决掉。
以上这篇js 动态给元素添加、移除事件的实现⽅法就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。