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 THICKBOX弹出层插件
Aug 30 Javascript
JQuery 学习笔记 选择器之三
Jul 23 Javascript
JS与框架页的操作代码
Jan 17 Javascript
一个背景云变换js特效 鼠标移动背景云变化
Dec 28 Javascript
JavaScript 判断一个对象{}是否为空对象的简单方法
Oct 09 Javascript
jQuery中select与datalist制作下拉菜单时的区别浅析
Dec 30 Javascript
webpack学习教程之publicPath路径问题详解
Jun 17 Javascript
JavaScript 自定义事件之我见
Sep 25 Javascript
javascript实现计算指定范围内的质数示例
Dec 29 Javascript
详解vue父子组件关于模态框状态的绑定方案
Jun 05 Javascript
js实现微信聊天界面
Aug 09 Javascript
如何正确解决VuePress本地访问出现资源报错404的问题
Dec 03 Vue.js
详解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 冒泡排序算法的实现代码
2010/08/08 PHP
php smarty 二级分类代码和模版循环例子
2011/06/01 PHP
PHP类的静态(static)方法和静态(static)变量使用介绍
2012/02/19 PHP
php二维数组用键名分组相加实例函数
2013/11/06 PHP
PHPExcel导出2003和2007的excel文档功能示例
2017/01/04 PHP
php实现网页上一页下一页翻页过程详解
2019/06/28 PHP
传递参数的标准方法(jQuery.ajax)
2008/11/19 Javascript
jquery如何判断表格同一列不同行input数据是否重复
2014/05/14 Javascript
jQuery/CSS3图片特效插件整理推荐
2014/12/07 Javascript
在Linux系统中搭建Node.js开发环境的简单步骤讲解
2016/01/26 Javascript
概述jQuery的元素筛选
2016/11/23 Javascript
vue.js评论发布信息可插入QQ表情功能
2017/08/08 Javascript
EasyUI的TreeGrid的过滤功能的解决思路
2017/08/08 Javascript
详解a++和++a的区别
2017/08/30 Javascript
解决Angular.js中使用Swiper插件不能滑动的问题
2018/02/26 Javascript
深入理解 Koa 框架中间件原理
2018/10/18 Javascript
函数式编程入门实践(一)
2019/04/20 Javascript
微信小程序嵌入腾讯视频源过程详解
2019/08/08 Javascript
vue使用exif获取图片经纬度的示例代码
2020/12/11 Vue.js
[04:27]DOTA2官方论坛水友赛集锦
2013/09/16 DOTA
[01:00:30]完美世界DOTA2联赛循环赛 Inki vs Matador BO2第二场 10.31
2020/11/02 DOTA
Python列表删除的三种方法代码分享
2017/10/31 Python
Python中生成器和迭代器的区别详解
2018/02/10 Python
python使用selenium登录QQ邮箱(附带滑动解锁)
2019/01/23 Python
django如何实现视图重定向
2019/07/24 Python
Python基于pygame实现单机版五子棋对战
2019/12/26 Python
TensorFlow内存管理bfc算法实例
2020/02/03 Python
将pymysql获取到的数据类型是tuple转化为pandas方式
2020/05/15 Python
python3 通过 pybind11 使用Eigen加速代码的步骤详解
2020/12/07 Python
新西兰最大的品牌运动鞋购物网站:Platypus NZ
2017/10/27 全球购物
30岁生日感言
2014/01/25 职场文书
商务英语广告词大全
2014/03/18 职场文书
媒矿安全生产承诺书
2014/05/23 职场文书
2014年统计工作总结
2014/11/21 职场文书
催款函怎么写
2015/06/24 职场文书
python基础之文件处理知识总结
2021/05/23 Python