DDR爱好者之家 Design By 杰米
最近项目中要要到 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 = 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 动态给元素添加、移除事件的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
DDR爱好者之家 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
DDR爱好者之家 Design By 杰米
暂无评论...
更新日志
2024年11月29日
2024年11月29日
- 凤飞飞《我们的主题曲》飞跃制作[正版原抓WAV+CUE]
- 刘嘉亮《亮情歌2》[WAV+CUE][1G]
- 红馆40·谭咏麟《歌者恋歌浓情30年演唱会》3CD[低速原抓WAV+CUE][1.8G]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[320K/MP3][193.25MB]
- 【轻音乐】曼托凡尼乐团《精选辑》2CD.1998[FLAC+CUE整轨]
- 邝美云《心中有爱》1989年香港DMIJP版1MTO东芝首版[WAV+CUE]
- 群星《情叹-发烧女声DSD》天籁女声发烧碟[WAV+CUE]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[FLAC/分轨][748.03MB]
- 理想混蛋《Origin Sessions》[320K/MP3][37.47MB]
- 公馆青少年《我其实一点都不酷》[320K/MP3][78.78MB]
- 群星《情叹-发烧男声DSD》最值得珍藏的完美男声[WAV+CUE]
- 群星《国韵飘香·贵妃醉酒HQCD黑胶王》2CD[WAV]
- 卫兰《DAUGHTER》【低速原抓WAV+CUE】
- 公馆青少年《我其实一点都不酷》[FLAC/分轨][398.22MB]
- ZWEI《迟暮的花 (Explicit)》[320K/MP3][57.16MB]