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 相关文章推荐
Prototype使用指南之range.js
Jan 10 Javascript
JavaScript Event学习第八章 事件的顺序
Feb 07 Javascript
引用外部脚本时script标签关闭的写法
Jan 20 Javascript
使用text方法获取Html元素文本信息示例
Sep 01 Javascript
javascript日期计算实例分析
Jun 29 Javascript
JS实现网站菜单拖拽移位效果的方法
Sep 24 Javascript
javascript中数组和字符串的方法对比
Jul 20 Javascript
React教程之封装一个Portal可复用组件的方法
Jan 02 Javascript
vue 使用eventBus实现同级组件的通讯
Mar 02 Javascript
vantUI 获得piker选中值的自定义ID操作
Nov 04 Javascript
原生JS实现拖拽效果
Dec 04 Javascript
vue-cli3.x配置全局的scss的时候报错问题及解决
Apr 30 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
通过ODBC连接的SQL SERVER实例
2006/10/09 PHP
php采集速度探究总结(原创)
2008/04/18 PHP
smarty高级特性之过滤器的使用方法
2015/12/25 PHP
php使用PDO执行SQL语句的方法分析
2017/02/16 PHP
PHP memcache在微信公众平台的应用方法示例
2017/09/13 PHP
jQuery EasyUI API 中文文档 - Draggable 可拖拽
2011/09/29 Javascript
js中关于一个分号的崩溃示例
2013/11/11 Javascript
jquery日历控件实现方法分享
2014/03/07 Javascript
js身份证判断方法支持15位和18位
2014/03/18 Javascript
jQuery获取页面元素绝对与相对位置的方法
2015/06/10 Javascript
原生js三级联动的简单实现代码
2016/06/07 Javascript
bootstrap table操作技巧分享
2017/02/15 Javascript
JS简单获得节点元素的方法示例
2018/02/10 Javascript
js中Object.defineProperty()方法的不详解
2018/07/09 Javascript
微信小程序canvas实现刮刮乐效果
2018/07/09 Javascript
Vue Promise的axios请求封装详解
2018/08/13 Javascript
快速了解Node中的Stream流是什么
2019/02/13 Javascript
Vue实现多页签组件
2021/01/14 Vue.js
[01:06:54]DOTA2-DPC中国联赛 正赛 SAG vs DLG BO3 第二场 2月28日
2021/03/11 DOTA
Python模块搜索概念介绍及模块安装方法介绍
2015/06/03 Python
Python实现使用request模块下载图片demo示例
2019/05/24 Python
解决python中导入win32com.client出错的问题
2019/07/26 Python
Python3 chardet模块查看编码格式的例子
2019/08/14 Python
python进程池实现的多进程文件夹copy器完整示例
2019/11/27 Python
django实现模型字段动态choice的操作
2020/04/01 Python
python 实现图像快速替换某种颜色
2020/06/04 Python
python hmac模块验证客户端的合法性
2020/11/07 Python
纯CSS3编写的的精美动画进度条(无flash/无图像/无脚本/附源码)
2013/01/07 HTML / CSS
HTML5 canvas 瀑布流文字效果的示例代码
2018/01/31 HTML / CSS
绿色美容,有机护肤品和化妆品:Safe & Chic
2018/10/29 全球购物
土耳其玩具商店:Toyzz Shop
2019/08/02 全球购物
《商鞅南门立木》教学反思
2014/02/16 职场文书
2014个人反腐倡廉思想汇报
2014/09/15 职场文书
简易离婚协议书(范本)
2014/10/25 职场文书
初中家长评语大全
2014/12/26 职场文书
Pandas||过滤缺失数据||pd.dropna()函数的用法说明
2021/05/14 Python