网创优客建站品牌官网
为成都网站建设公司企业提供高品质网站建设
热线:028-86922220
成都专业网站建设公司

定制建站费用3500元

符合中小企业对网站设计、功能常规化式的企业展示型网站建设

成都品牌网站建设

品牌网站建设费用6000元

本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...

成都商城网站建设

商城网站建设费用8000元

商城网站建设因基本功能的需求不同费用上面也有很大的差别...

成都微信网站建设

手机微信网站建站3000元

手机微信网站开发、微信官网、微信商城网站...

建站知识

当前位置:首页 > 建站知识

js绑定事件和解绑事件

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

成都创新互联公司提供成都网站制作、网站设计、网页设计,品牌网站建设1元广告等致力于企业网站建设与公司网站制作,十余年的网站开发和建站经验,助力企业信息化建设,成功案例突破超过千家,是您实现网站建设的好选择.

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

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


当前标题:js绑定事件和解绑事件
文章起源:http://bjjierui.cn/article/ieshhi.html

其他资讯