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 相关文章推荐
JavaScript中的稀疏数组与密集数组[译]
Sep 17 Javascript
js获取窗口相对于屏幕左边和上边的位置坐标
May 15 Javascript
javascript设置连续两次点击按钮时间间隔的方法
Oct 28 Javascript
jQuery中:visible选择器用法实例
Dec 30 Javascript
Js控制滑轮左右滑动实例
Feb 13 Javascript
js防阻塞加载的实现方法
Sep 09 Javascript
Angular.js中$apply()和$digest()的深入理解
Oct 13 Javascript
火狐和ie下获取javascript 获取event的方法(推荐)
Nov 26 Javascript
最常见的左侧分类菜单栏jQuery实现代码
Nov 28 Javascript
基于Bootstrap模态对话框只加载一次 remote 数据的解决方法
Jul 09 Javascript
解决vue中post方式提交数据后台无法接收的问题
Aug 11 Javascript
vue中的v-model原理,与组件自定义v-model详解
Aug 04 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
php桌面中心(三) 修改数据库
2007/03/11 PHP
PHP数组无限分级数据的层级化处理代码
2012/12/29 PHP
基于Jquery 解决Ajax请求的页面 浏览器后退前进功能,页面刷新功能实效问题
2010/12/11 Javascript
jsPDF生成pdf后在网页展示实例
2014/01/16 Javascript
Node.js中HTTP模块与事件模块详解
2014/11/14 Javascript
实例讲解javascript注册事件处理函数
2016/01/09 Javascript
AngularJS入门教程之 XMLHttpRequest实例讲解
2016/07/27 Javascript
javascript中的后退和刷新实现方法
2016/11/10 Javascript
又一款MVVM组件 构建自己的Vue组件(2)
2017/03/13 Javascript
使用BootStrap实现标签切换原理解析
2017/03/14 Javascript
微信小程序实战之登录页面制作(5)
2020/03/30 Javascript
webpack多入口文件页面打包配置详解
2018/01/09 Javascript
jquery拖拽自动排序插件使用方法详解
2020/07/20 jQuery
jQuery AJAX与jQuery事件的分析讲解
2019/02/18 jQuery
JavaScript中跨域问题的深入理解
2021/03/04 Javascript
Python实现二分查找算法实例
2015/05/26 Python
在Python的while循环中使用else以及循环嵌套的用法
2015/10/14 Python
用 Python 连接 MySQL 的几种方式详解
2018/04/04 Python
Python3.6笔记之将程序运行结果输出到文件的方法
2018/04/22 Python
Python面向对象基础入门之设置对象属性
2018/12/11 Python
对Python 语音识别框架详解
2018/12/24 Python
Python datetime包函数简单介绍
2019/08/28 Python
Python使用Tkinter实现滚动抽奖器效果
2020/01/06 Python
python自动化unittest yaml使用过程解析
2020/02/03 Python
Python3爬虫中Splash的知识总结
2020/07/10 Python
工程师必须了解的LRU缓存淘汰算法以及python实现过程
2020/10/15 Python
html5中为audio标签增加停止按钮动作实现方法
2013/01/04 HTML / CSS
英国口碑最好的的维他命胶囊品牌:Myvitamins(有中文站)
2016/12/03 全球购物
网络艺术零售业的先驱者:artrepublic
2017/09/26 全球购物
Perfume’s Club意大利官网:欧洲美妆电商
2019/05/03 全球购物
马来西亚奢侈品牌购物商城:Valiram 247
2020/09/29 全球购物
小学开学典礼主持词
2014/03/19 职场文书
项目经理聘任书
2014/03/29 职场文书
沈阳故宫导游词
2015/01/31 职场文书
慰问信(范文3篇)
2019/10/23 职场文书
Python中request的基本使用解决乱码问题
2022/04/12 Python