js绑定事件和解绑事件


Posted in Javascript onApril 27, 2017

在js中绑定多个事件用到的是两个方法:attachEvent和addEventListener,但是这两个方法又存在差异性

attachEvent方法  只支持IE678,不兼容其他浏览器

addEventListener方法   兼容火狐谷歌,不兼容IE8及以下

addEventListener方法

div.addEventListener('click',fn);

div.addEventListener('click',fn2);
function fn(){ console.log("春雨绵绵"); }

function fn2(){
        console.log("到处潮湿");
      }

attachEvent方法

div.attachEvent('onclick',fn);
div.attachEvent('onclick',fn2);
function fn(){ console.log("春雨绵绵"); }
function fn2(){
        console.log("到处潮湿");
      }

注意点:attachEvent方法绑定的事件是带on的,addEventListener绑定的事件是不带on的

下面我写了一个兼容了IE和火狐谷歌的方法

var div=document.getElementsByTagName("div")[0];
      addEvent('click',div,fn)
      function addEvent(str,ele,fn){
        ele.attachEvent?ele.attachEvent('on'+str,fn):ele.addEventListener(str,fn);
      }
      function fn(){
        console.log("春雨绵绵");
      }

这样就完美的解决了兼容性的问题

有绑定事件的话,那就肯定有解绑事件,但是解绑事件和绑定事件一样,万恶的IE还是会搞特殊化

detachEvent方法  只支持IE678,不兼容其他浏览器

removeEventListener方法   兼容火狐谷歌,不兼容IE8及以下

detachEvent方法写法:

ele.detachEvent("onclick",fn);

removeEventListener的写法:

ele.removeEventListener("click",fn);

下面我写了一个兼容性的方法给大家参考,实现也是很简单

function remove(str,ele,fn){
        ele.detachEvent?ele.detachEvent("on"+str,fn):ele.removeEventListener(str,fn);
      }

注意点:不管是绑定事件attachEvent还是删除事件detachEvent都是要加on的,removeEventListenser和addEventListenser则不需要加on

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木

Javascript 相关文章推荐
jquery实现鼠标滑过显示提示框的方法
Feb 05 Javascript
js动态创建及移除div的方法
Jun 03 Javascript
贴近用户体验的Jquery日期、时间选择插件
Aug 19 Javascript
微信小程序 this和that详解及简单实例
Feb 13 Javascript
jQuery实现贪吃蛇小游戏(附源码下载)
Mar 04 Javascript
JavaScript实现为事件句柄绑定监听函数的方法分析
Nov 14 Javascript
利用vue + element实现表格分页和前端搜索的方法
Dec 25 Javascript
详解vue使用vue-layer-mobile组件实现toast,loading效果
Aug 31 Javascript
vue完成项目后,打包成静态文件的方法
Sep 03 Javascript
微信小程序--获取用户地理位置名称(无须用户授权)的方法
Apr 29 Javascript
详解在vue-cli3.0中自定css、js和图片的打包路径
Aug 26 Javascript
浅谈vue中get请求解决传输数据是数组格式的问题
Aug 03 Javascript
详解ECMAScript6入门--Class对象
Apr 27 #Javascript
利用Vue v-model实现一个自定义的表单组件
Apr 27 #Javascript
详解Vue 普通对象数据更新与 file 对象数据更新
Apr 26 #Javascript
微信小程序实现给循环列表添加点击样式实例
Apr 26 #Javascript
微信小程序 request接口的封装实例代码
Apr 26 #Javascript
微信小程序中hidden不生效原因的解决办法
Apr 26 #Javascript
微信小程序 flex实现导航实例详解
Apr 26 #Javascript
You might like
php版小黄鸡simsimi聊天机器人接口分享
2014/01/26 PHP
浅谈PHP中JSON数据操作
2015/07/01 PHP
php基于单例模式封装mysql类完整实例
2016/10/18 PHP
js中for in的用法示例解析
2013/12/25 Javascript
js中传递特殊字符(+,&)的方法
2014/01/16 Javascript
DOM基础教程之使用DOM
2015/01/19 Javascript
jquery+easeing实现仿flash的载入动画
2015/03/10 Javascript
jQuery实现多级下拉菜单jDropMenu的方法
2015/08/28 Javascript
jQuery实现下拉加载功能实例代码
2016/04/01 Javascript
javascript self对象使用详解
2016/10/18 Javascript
jQuery插件zTree实现获取当前选中节点在同级节点中序号的方法
2017/03/08 Javascript
用vuex写了一个购物车H5页面的示例代码
2018/12/04 Javascript
PHP实现基于Redis的MessageQueue队列封装操作示例
2019/02/02 Javascript
this.$toast() 了解一下?
2019/04/18 Javascript
layer 关闭指定弹出层的例子
2019/09/25 Javascript
flexible.js实现移动端rem适配方案
2020/04/07 Javascript
javascript执行上下文、变量对象实例分析
2020/04/25 Javascript
python开发之list操作实例分析
2016/02/22 Python
python使用knn实现特征向量分类
2018/12/26 Python
Python getattr()函数使用方法代码实例
2020/08/10 Python
请解释接口的显式实现有什么意义
2012/05/26 面试题
市场营销专科应届生求职信
2013/11/24 职场文书
机电一体化专业推荐信
2013/12/03 职场文书
群众路线批评与自我批评
2014/02/06 职场文书
法律进机关实施方案
2014/03/12 职场文书
开学典礼主持词
2014/03/19 职场文书
邮政竞聘演讲稿
2014/09/03 职场文书
部门群众路线教育实践活动对照检查材料思想汇报
2014/10/07 职场文书
新婚姻法离婚协议书范文
2014/11/30 职场文书
校园环境卫生倡议书
2015/04/29 职场文书
交通事故起诉书
2015/05/19 职场文书
跑吧孩子观后感
2015/06/10 职场文书
班级联欢会主持词
2015/07/03 职场文书
开业庆典致辞
2015/08/01 职场文书
Python实现为PDF去除水印的示例代码
2022/04/03 Python
Mysql中mvcc各场景理解应用
2022/08/05 MySQL