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公告滚动+AJAX后台得到数据
Apr 14 Javascript
JS控制文本框textarea输入字数限制的方法
Jun 17 Javascript
浅谈利用JavaScript进行的DDoS攻击原理与防御
Jun 04 Javascript
在AngularJS应用中实现一些动画效果的代码
Jun 18 Javascript
AngularJS基础 ng-keypress 指令简单示例
Aug 02 Javascript
jQuery grep()方法详解及实例代码
Oct 30 Javascript
JavaScript实现经典排序算法之冒泡排序
Dec 28 Javascript
jQuery插件版本冲突的处理方法分析
Jan 16 Javascript
AngularJS中控制器函数的定义与使用方法示例
Oct 10 Javascript
vue 挂载路由到头部导航的方法
Nov 13 Javascript
微信小程序实现注册登录功能(表单校验、错误提示)
Dec 10 Javascript
vue 导航菜单刷新状态不消失,显示对应的路由界面操作
Aug 06 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
Win9x/ME下Apache+PHP安装配置
2006/10/09 PHP
php后门URL的防范
2013/11/12 PHP
ThinkPHP在新浪SAE平台的部署实例
2014/10/31 PHP
php数组合并与拆分实例分析
2015/06/12 PHP
PHP模板引擎Smarty中的保留变量用法分析
2016/04/11 PHP
php中array_column函数简单实现方法
2016/07/11 PHP
用javascript获得地址栏参数的两种方法
2006/11/08 Javascript
关于query Javascript CSS Selector engine
2013/04/12 Javascript
jquery触发a标签跳转事件示例代码
2013/07/21 Javascript
一个小例子解释如何来阻止Jquery事件冒泡
2014/07/17 Javascript
JavaScript改变CSS样式的方法汇总
2015/05/07 Javascript
jQuery实现的经典竖向伸缩菜单效果代码
2015/09/24 Javascript
基于jquery实现页面滚动时顶部导航显示隐藏
2020/04/20 Javascript
AngularJS 中的指令实践开发指南(一)
2016/03/20 Javascript
原生js仿浏览器滚动条效果
2017/03/02 Javascript
angularjs指令之绑定策略(@、=、&)
2017/04/13 Javascript
浅谈JS封闭函数、闭包、内置对象
2017/07/18 Javascript
Intellij IDEA搭建vue-cli项目的方法步骤
2018/10/20 Javascript
一步步教你利用Docker设置Node.js
2018/11/20 Javascript
JS如何调用WebAssembly编译出来的.wasm文件
2020/11/05 Javascript
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
2021/01/22 Vue.js
python实现按关键字筛选日志文件
2019/12/24 Python
基于python实现坦克大战游戏
2020/10/27 Python
CSS3实现文本垂直排列的方法
2018/07/10 HTML / CSS
canvas因为图片资源不在同一域名下而导致的跨域污染画布的解决办法
2019/01/18 HTML / CSS
印尼最大的在线购物网站:MatahariMall.com
2016/08/26 全球购物
英国领先的在线药房:Pharmacy First
2017/09/10 全球购物
介绍一下mysql的日期和时间函数
2013/03/28 面试题
学生打架检讨书
2014/02/14 职场文书
信息服务专业毕业生求职信
2014/03/02 职场文书
2014年党务公开方案
2014/05/08 职场文书
地球物理学专业推荐信
2014/09/08 职场文书
融资合作协议书范本
2014/10/17 职场文书
辞职信模板(中英文版)
2015/02/27 职场文书
小学教师党员承诺书
2015/04/27 职场文书
2016年大学生党员承诺书
2016/03/24 职场文书