欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

js绑定事件和解绑事件

程序员文章站 2023-12-09 21:41:21
在js中绑定多个事件用到的是两个方法:attachevent和addeventlistener,但是这两个方法又存在差异性 attachevent方法  只支持...

在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

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