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 相关文章推荐
10款新鲜出炉的 jQuery 插件(Ajax 插件,有幻灯片、图片画廊、菜单等)
Jun 08 Javascript
JavaScript中的eval()函数详解
Aug 22 Javascript
实现动画效果核心方式的js代码
Sep 27 Javascript
jquery easyui使用心得
Jul 07 Javascript
jQuery实现跨域
Feb 03 Javascript
jQuery实现的类似淘宝网站搜索框样式代码分享
Aug 24 Javascript
第五篇Bootstrap 排版
Jun 21 Javascript
jQuery展示表格点击变色、全选、删除
Jan 05 Javascript
Bootstrap 设置datetimepicker在屏幕上面弹出设置方法
Mar 21 Javascript
利用vue + koa2 + mockjs模拟数据的方法教程
Nov 22 Javascript
vue slots 组件的组合/分发实例
Sep 06 Javascript
jquery实现简易验证插件封装
Sep 13 jQuery
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实现的获取网站备案信息查询代码(360)
2013/09/23 PHP
php判断对象是派生自哪个类的方法
2015/06/20 PHP
PHP中常用的数组操作方法笔记整理
2016/05/16 PHP
Jquery ui css framework
2010/06/28 Javascript
JavaScript对象之间的转换 jQuery对象和原声DOM
2011/03/07 Javascript
ECMAScript6新增值比较函数Object.is
2015/06/12 Javascript
javascript实现鼠标移到Image上方时显示文字效果的方法
2015/08/07 Javascript
第一章之初识Bootstrap
2016/04/25 Javascript
JS实现的添加弹出层并完成锁屏操作示例
2017/04/07 Javascript
一个简易时钟效果js实现代码
2020/03/25 Javascript
关于JavaScript语句后面的分号问题
2017/12/07 Javascript
vue实现多个元素或多个组件之间动画效果
2018/09/25 Javascript
有趣的JavaScript隐式类型转换操作实例分析
2020/05/02 Javascript
Vue CLI4 Vue.config.js标准配置(最全注释)
2020/06/05 Javascript
原生js canvas实现鼠标跟随效果
2020/08/02 Javascript
python开发利器之ulipad的使用实践
2017/03/16 Python
python学习教程之Numpy和Pandas的使用
2017/09/11 Python
Python数据类型中的“冒号“[::]——分片与步长操作示例
2018/01/24 Python
python面向对象多线程爬虫爬取搜狐页面的实例代码
2018/05/31 Python
PyCharm设置护眼背景色的方法
2018/10/29 Python
python实现文本进度条 程序进度条 加载进度条 单行刷新功能
2019/07/03 Python
Python3安装pip工具的详细步骤
2019/10/14 Python
Python利用多线程同步锁实现多窗口订票系统(推荐)
2019/12/22 Python
Pyecharts地图显示不完成问题解决方案
2020/05/11 Python
python怎么提高计算速度
2020/06/11 Python
HTML5新特性 多线程(Worker SharedWorker)
2017/04/24 HTML / CSS
英国专业美容产品在线:Mylee(从指甲到脱毛)
2020/07/06 全球购物
保安岗位职责
2014/02/21 职场文书
数控技校生自我鉴定
2014/04/19 职场文书
高中竞选班长演讲稿
2014/04/24 职场文书
简单租房协议书范本
2014/08/20 职场文书
预备党员转正材料
2014/12/19 职场文书
创业计划书之校园跑腿公司
2019/09/24 职场文书
解决pytorch-gpu 安装失败的记录
2021/05/24 Python
javascript数组includes、reduce的基本使用
2021/07/02 Javascript
python flappy bird小游戏分步实现流程
2022/02/15 Python