本文介绍在JavaScript中动态为元素添加和移除事件的方法。通过原生addEventListener和removeEventListener实现时，需注意函数引用一致性问题，匿名函数无法被正确移除。若遇到类型不匹配或移除失败，可尝试封装无参函数或改用jQuery的bind和unbind方法，后者能更简便地处理动态事件绑定与解绑。
动态事件绑定的基本实现
近期项目中需要实现JavaScript动态为元素绑定事件的功能，此前未深入使用过此类操作，因此通过查阅资料进行了学习，并编写了两个示例函数，分别用于添加事件和移除事件。
/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 = 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')});
}
}
function removeEvnent() {
var obj = 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') 提出来 写成function test(msg){ alert(msg)}改写成 function addEvent() { var obj = 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')});
}
}
function removeEvnent() {
var obj = document.getElementById("txtIataCity");
if (window.removeEventListener) {
obj.removeEventListener('focus',test('msg')}, false);
}
else {
obj.detachEvent('onfocus',test('msg'));
}
}执行过程中IE浏览器提示“类型不匹配”，推测是不支持带参数的函数。随后将函数封装为无参形式传入，以适配浏览器要求。
再次执行后，添加事件成功，但移除事件依然失败。在网上搜索发现，多数示例均能成功，但自己的代码无法实现移除功能，原因尚不明确。
使用jQuery简化事件处理
检查页面发现已引用jQuery库，于是改用jQuery的bind和unbind方法处理事件，最终一次性成功实现添加与移除功能。
待项目结束后，将彻底解决此问题，优化事件处理逻辑。
以上关于JavaScript动态为元素添加和移除事件的实现方法，由小编整理分享，供读者参考。欢迎支持本站，获取更多技术内容。