js 动态给元素添加、移除事件
2010-11-26 11:11
465 查看
最近项目中要要到 js动态给给元素绑定事件,刚好之前没用到过这些,顺便学习一下,于是google了一下 事件,写了如下两个事件 一个添加事件 ,一个是移除事件
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绑定事件,测试添加成功,可是移除始终不成功。于是网上找参考资料
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的bind 和unbind 事件 一次成功。
唉,等项目完了 把这个问题解决掉。
/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的bind 和unbind 事件 一次成功。
唉,等项目完了 把这个问题解决掉。
相关文章推荐
- js 动态给元素添加、移除事件的实现方法
- js 修改svg样式、动态加入DOM元素、添加事件响应函数
- JS_增加事件,移除事件,动态元素的增删事件研究
- 页面元素用JS动态添加的有效事件绑定方式(on)
- 通过js动态为标签元素添加点击事件
- JS动态添加移除事件 和 获取Event (兼容IE和Firefox)
- JS实现为动态创建的元素添加事件操作示例
- 页面元素用JS动态添加的有效事件绑定方式
- JS实现为动态添加的元素增加事件功能示例【基于事件委托】
- js为动态添加的元素增加事件(事件委托)
- 针对js动态添加元素后,事件处理不起作用的解决方案。
- js为动态添加的元素增加事件(事件委托)
- ready和onload比较;可以在下面的script里面调用先前script;动态为元素添加事件;浮动广告;js添加删除tr
- jquery动态添加元素后, 该元素事件失效,可尝试原生 js写法解决
- JS动态添加元素及绑定事件造成程序重复执行解决
- js动态添加元素为何 点击事件无效
- JS_增加事件,移除事件,动态元素的增删事件
- jquery on() 给js动态新添加的元素 绑定的点击事件。
- 事件委托:给多个元素和动态添加的元素绑定js事件,