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 相关文章推荐
jquery 简单导航实现代码
Sep 11 Javascript
jquery表单验证使用插件formValidator
Nov 10 Javascript
JS 毫秒转时间示例代码
Sep 22 Javascript
jQuery插件实现无缝滚动特效
Nov 24 Javascript
JavaScript的设计模式经典之建造者模式
Feb 24 Javascript
JavaScript常用判断写法大全(推荐)
May 30 Javascript
纯JS实现简单的日历
Jun 26 Javascript
微信小程序实现登录注册tab切换效果
Dec 29 Javascript
详解Vue内部怎样处理props选项的多种写法
Nov 06 Javascript
JS前端知识点offset,scroll,client,冒泡,事件对象的应用整理总结
Jun 27 Javascript
微信小程序获取地理位置及经纬度授权代码实例
Sep 18 Javascript
JavaScript的垃圾回收机制与内存管理
Aug 06 Javascript
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
DIY一个适配电脑声卡的动圈话筒放大器
2021/03/02 无线电
由php中字符offset特征造成的绕过漏洞详解
2017/07/07 PHP
浅谈php://filter的妙用
2019/03/05 PHP
JavaScript 错误处理与调试经验总结
2010/08/10 Javascript
jquery easyui中treegrid用法的简单实例
2014/02/18 Javascript
node.js中RPC(远程过程调用)的实现原理介绍
2014/12/05 Javascript
JavaScript统计网站访问次数的实现代码
2015/11/18 Javascript
JavaScript Date对象详解
2016/03/01 Javascript
JavaScript 闭包机制详解及实例代码
2016/10/10 Javascript
详解Javascript数据类型的转换规则
2016/12/12 Javascript
浅谈在Vue-cli里基于axios封装复用请求
2017/11/06 Javascript
一篇文章,教你学会Vue CLI 插件开发
2019/04/17 Javascript
详解Node.js使用token进行认证的简单示例
2020/05/25 Javascript
vue 手机物理监听键+退出提示代码
2020/09/09 Javascript
[03:56]还原FTP电影首映式 DOTA2群星拼出遗迹世界
2014/03/26 DOTA
[01:21]DOTA2 新英雄 森海飞霞
2020/12/18 DOTA
python数据结构树和二叉树简介
2014/04/29 Python
使用python实现拉钩网上的FizzBuzzWhizz问题示例
2014/05/05 Python
Python和Ruby中each循环引用变量问题(一个隐秘BUG?)
2014/06/04 Python
python中字符串数组逆序排列方法总结
2019/06/23 Python
python代理工具mitmproxy使用指南
2019/07/04 Python
Python计算矩阵的和积的实例详解
2020/09/10 Python
Python自动化办公Excel模块openpyxl原理及用法解析
2020/11/05 Python
CSS3实现文字波浪线效果示例代码
2016/11/20 HTML / CSS
canvas学习笔记之2d画布基础的实现
2019/02/21 HTML / CSS
HTML5学习笔记之History API
2015/02/26 HTML / CSS
游戏商店:Eneba
2020/04/25 全球购物
Python的两道面试题
2013/06/29 面试题
法律专业自我鉴定
2013/10/03 职场文书
社区国庆节活动方案
2014/02/05 职场文书
《花的勇气》教后反思
2014/02/12 职场文书
防邪知识进家庭活动方案
2014/08/26 职场文书
保证书格式
2015/01/16 职场文书
老乡聚会通知
2015/04/23 职场文书
2016党员学习作风建设心得体会
2016/01/21 职场文书
pytorch通过训练结果的复现设置随机种子
2021/06/01 Python