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 相关文章推荐
javascript 按回车键相应按钮提交事件
Nov 02 Javascript
jquery下利用jsonp跨域访问实现方法
Jul 29 Javascript
jQuery之选项卡的简单实现
Feb 28 Javascript
JavaScript开发Chrome浏览器扩展程序UI的教程
May 16 Javascript
AngularJS实现树形结构(ztree)菜单示例代码
Sep 18 Javascript
原生js实现可拖动的登录框效果
Jan 21 Javascript
JavaScript数据结构中栈的应用之表达式求值问题详解
Apr 11 Javascript
Vue实现百度下拉提示搜索功能
Jun 21 Javascript
react native仿微信PopupWindow效果的实例代码
Aug 07 Javascript
JS获取日期的方法实例【昨天,今天,明天,前n天,后n天的日期】
Sep 28 Javascript
vue+element 实现商城主题开发的示例代码
Mar 26 Javascript
vue-router路由懒加载及实现的3种方式
Feb 28 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&MYSQL服务器配置说明
2006/10/09 PHP
CentOS 6.2使用yum安装LAMP以及phpMyadmin详解
2013/06/17 PHP
解析PHP实现多进程并行执行脚本
2013/06/18 PHP
php中session使用示例
2014/03/29 PHP
PHP中spl_autoload_register()和__autoload()区别分析
2014/05/10 PHP
laravel 4安装及入门图文教程
2014/10/29 PHP
通过php添加xml文档内容的方法
2015/01/23 PHP
php实现异步数据调用的方法
2015/12/24 PHP
PHP单例模式是什么 php实现单例模式的方法
2016/05/14 PHP
Laravel 5.1 on SAE环境开发教程【附项目demo源码】
2016/10/09 PHP
解决FLASH需要点击激活的代码
2006/12/20 Javascript
firefox浏览器下javascript 拖动层效果与原理分析代码
2007/12/04 Javascript
Jquery Ajax学习实例4 向WebService发出请求,返回实体对象的异步调用
2010/03/16 Javascript
11款新鲜的jQuery插件[附所有demo下载]
2011/01/24 Javascript
JS高级笔记
2011/07/13 Javascript
jQuery模拟超链接点击效果代码
2013/04/21 Javascript
jquery触发a标签跳转事件示例代码
2013/07/21 Javascript
Ajax提交与传统表单提交的区别说明
2014/02/07 Javascript
基于javascript的JSON格式页面展示美化方法
2014/07/02 Javascript
通过js获取上传的图片信息(临时保存路径,名称,大小)然后通过ajax传递给后端的方法
2015/10/01 Javascript
基于javascript实现全国省市二级联动下拉选择菜单
2016/01/28 Javascript
jQuery短信验证倒计时功能实现方法详解
2016/05/25 Javascript
JS控制静态页面之间传递参数获取参数并应用的简单实例
2016/08/10 Javascript
iview Upload组件多个文件上传的示例代码
2018/09/30 Javascript
微信小程序自定义tabBar在uni-app的适配详解
2019/09/30 Javascript
Centos7 安装Node.js10以上版本的方法步骤
2019/10/15 Javascript
vue 微信分享回调iOS和安卓回调出现错误的解决
2020/09/07 Javascript
Python中绑定与未绑定的类方法用法分析
2016/04/29 Python
anaconda中更改python版本的方法步骤
2019/07/14 Python
BONIA官方网站:国际奢侈品牌和皮革专家
2016/11/27 全球购物
SQL Server面试题
2013/04/04 面试题
食品安全承诺书
2014/05/22 职场文书
2014年幼儿园重阳节活动方案
2014/09/16 职场文书
税务干部个人整改措施思想汇报
2014/10/10 职场文书
汽车销售助理岗位职责
2015/04/14 职场文书
Redis的字符串是如何实现的
2021/10/24 Redis