js 动态给元素添加、移除事件的实现方法


Posted in Javascript onJuly 19, 2016

最近项目中要要到 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 动态给元素添加、移除事件的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
12个非常有创意的JavaScript小游戏
Mar 18 Javascript
JavaScript 继承机制的实现(待续)
May 18 Javascript
简单纯js实现点击切换TAB标签实例
Aug 23 Javascript
超赞的jQuery图片滑块动画特效代码汇总
Jan 25 Javascript
JavaScript实现显示函数调用堆栈的方法
Apr 21 Javascript
基于jQuery实现仿百度首页选项卡切换效果
May 29 Javascript
JS实现获取当前URL和来源URL的方法
Aug 24 Javascript
AngularJS extend用法详解及实例代码
Nov 15 Javascript
从0到1搭建Element的后台框架的方法步骤
Apr 10 Javascript
JS window对象简单操作完整示例
Jan 14 Javascript
JS实现TITLE悬停长久显示效果完整示例
Feb 11 Javascript
vue仿携程轮播图效果(滑动轮播,下方高度自适应)
Feb 11 Vue.js
js实现动态创建的元素绑定事件
Jul 19 #Javascript
用js动态添加html元素,以及属性的简单实例
Jul 19 #Javascript
详谈JS中实现种子随机数及作用
Jul 19 #Javascript
全面了解JavaScript对象进阶
Jul 19 #Javascript
EasyUI中在表单提交之前进行验证
Jul 19 #Javascript
jQuery EasyUI提交表单验证
Jul 19 #Javascript
js 动态添加元素(div、li、img等)及设置属性的方法
Jul 19 #Javascript
You might like
PHP加速 eAccelerator配置和使用指南
2009/06/05 PHP
保存到桌面、设为桌面且带图标的PHP代码
2013/11/19 PHP
php计算税后工资的方法
2015/07/28 PHP
UTF-8正则表达式如何匹配汉字
2015/08/03 PHP
JavaScript 提升运行速度之循环篇 译文
2009/08/15 Javascript
jQuery 获取浏览器所在的IP地址的小例子
2013/11/08 Javascript
javascript中checkbox使用方法简单实例演示
2015/11/17 Javascript
整理Javascript基础入门学习笔记
2015/11/29 Javascript
使用JS代码实现点击按钮下载文件
2016/11/12 Javascript
JS表单传值和URL编码转换
2018/03/03 Javascript
vue2之简易的pc端短信验证码的问题及处理方法
2019/06/03 Javascript
微信小程序使用npm包的方法步骤
2019/08/13 Javascript
ES6基础之 Promise 对象用法实例详解
2019/08/22 Javascript
JavaScript canvas绘制渐变颜色的矩形
2020/02/18 Javascript
javascript canvas时钟模拟器
2020/07/13 Javascript
[01:01:18]VP vs NIP 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python中变量交换的例子
2014/08/25 Python
Python中运行并行任务技巧
2015/02/26 Python
Python中字符串对齐方法介绍
2015/05/21 Python
Python scikit-learn 做线性回归的示例代码
2017/11/01 Python
如何在python中使用selenium的示例
2017/12/26 Python
详解python的ORM中Pony用法
2018/02/09 Python
Python3日期与时间戳转换的几种方法详解
2019/06/04 Python
Python中print函数简单使用总结
2019/08/05 Python
使用python 对验证码图片进行降噪处理
2019/12/18 Python
英国演唱会订票网站:Ticket Selection
2018/03/27 全球购物
安全生产先进个人材料
2014/02/06 职场文书
带病坚持工作事迹
2014/05/03 职场文书
教师节活动总结
2014/08/29 职场文书
政府个人对照检查材料思想汇报
2014/10/08 职场文书
2015试用期转正工作总结
2014/12/12 职场文书
2015年暑期社会实践活动总结
2015/03/27 职场文书
毕业感言怎么写
2015/07/31 职场文书
治理商业贿赂工作总结
2015/08/10 职场文书
nginx中封禁ip和允许内网ip访问的实现示例
2022/03/17 Servers
SQL Server的存储过程与触发器以及系统函数和自定义函数
2022/04/10 SQL Server