当前位置:首页 > 日记 > 正文

js绑定事件和解绑事件

js绑定事件和解绑事件

在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

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

相关文章

ps怎么制作冲击波效果的?

ps怎么制作冲击波效果的?

冲击波,效果,电脑软件,ps,利用Photoshop制作冲击波效果其实主要应用了滤镜的各种功能,现在就把制作的步骤和截图分享给大家,希望对你有所帮助,本经验仅供参考使用。软件名称:Adobe Photoshop 8.0 中文完整绿色破解版软件大小:150.1MB更新时间:201…

excel制作数据汇总表的教程excel怎

excel制作数据汇总表的教程excel怎

数据,教程,汇总表,电脑软件,excel,  Excel中经常需要用到数据汇总的功能对数据进行汇总统计,数据汇总表可以帮助用户快速看清数据的数目,数据汇总表具体该如何制作呢?接下来是小编为大家带来的excel制作数据汇总表的教程,供大家参考。excel…

JS中IP地址与整数相互转换的实现代

JS中IP地址与整数相互转换的实现代

相互转换,地址,整数,代码,电脑软件,主要用于在js判断用户输入的一个ip段是否合法,如:192.168.1.11-192.168.1.134实现代码一:function ipToNumber(ip) { var num = 0; if(ip == "") { return num; } var aNum = ip.split(".…

怎么压缩ppt2010的x

怎么压缩ppt2010的x

压缩,电脑软件,  我们在使用ppt2010过程中,如果插入了很多图片,导致ppt整体文件很大,那么我们完全可以使用图片压缩功能,下面小编就教你如何压缩ppt2010中的图片。ppt2010压缩图片的步骤:  打开ppt2010后,新建幻灯片,并插入图片,如下图就是小编…

Excel滚动条消失了怎么办Excel找回

Excel滚动条消失了怎么办Excel找回

滚动条,方法,消失了,电脑软件,Excel,  在日常的工作中,经常要使用Excel文件交流处理数据,打开Excel文件,有时会看不到滚动条,这可能是朋友在制作Excel文件时做了一些“手脚”。要想在自己电脑上恢复滚动条,做一些设置就行了。下面小…

浅谈vue中数据双向绑定的实现原理

浅谈vue中数据双向绑定的实现原理

双向绑定,实现原理,数据,浅谈,电脑软件,vue中最常见的属v-model这个数据双向绑定了,很好奇它是如何实现的呢?尝试着用原生的JS去实现一下。首先大致学习了解下Object.defineProperty()这个东东吧!* Object.defineProperty() * 对对象的属…

excel表格rank函数如何使用

excel表格rank函数如何使用

函数,表格,如何使用,使用技巧,技巧,  Excel中经常需要使用到rank函数进行排序,rank函数具体该如何使用呢?下面是小编带来的关于excel中rank函数的使用技巧,希望看完本教程的朋友都能学会并运用起来。excel表格rank函数使用技巧rank函数使用…

word2013怎么设置页面背景颜色word

word2013怎么设置页面背景颜色word

设置,背景颜色,步骤,方法,页面,  相比于前面几个版本的word,word2013的页面背景设置不仅选项更多,而且做出来的效果也更好,不信,小编下面就演示给你看。word2013设置页面背景颜色的步骤1、用word2013打开一篇文档,并切换到“设计”…

Word中进行样式和格式设置的操作技

Word中进行样式和格式设置的操作技

设置,操作技巧,样式,格式,操作步骤,  Word样式和格式如何设置?在表格中起到美化格式的作用,具体该怎么去进行操作的呢?今天,小编就教大家在Word中进行样式和格式设置的操作技巧。Word中进行样式和格式设置的操作步骤1、首先,保证文档中有文…

Word插入屏幕截图的操作方法是什么

Word插入屏幕截图的操作方法是什么

操作方法,屏幕截图,电脑软件,Word,  在使用Word进行文档的编辑时,有时候需要进行对文中插入屏幕截图,在早期的版本中,只能通过第三方的软件截取、完成之后在插入文档中,而Word2013可以直接通过其自带的截屏功能进行屏幕的截取。以下是小编为…

bootstrapValidator 重新启用提交

bootstrapValidator 重新启用提交

启用,方法,提交,按钮,电脑软件,bootstrapValidator 使用中,由于字段检查等原因,致使提交按钮失效。如何重新启用提交按钮呢?下面一句代码可以实现启用提交按钮:$('#loginForm').bootstrapValidator('disableSubmitButtons', false); 下面看…

Word中插入首页和奇偶不同页码的操

Word中插入首页和奇偶不同页码的操

首页,奇偶,操作方法,页码,操作步骤,  想必大家在学习工作中经常会遇到word文档的排版,其中经常会出现页码首页不同以及奇偶页不同的情况,今天,小编就教大家在Word中插入首页和奇偶不同页码的操作方法。Word中插入首页和奇偶不同页码的操作步…