javaScript为元素的事件绑定多个监听及兼容代码

1. 对象.addEventListener("前缀没有on的事件类型",事件处理函数,false);--谷歌和火狐支持,IE8不支持
   参数1：String 事件的类型，如点击事件，鼠标进入事件，移除事件，事件前缀没有on，如“click”，“focus”
   参数2：Function 事件处理函数(命名函数,匿名函数)
   参数3：boolean 暂无解释，一般为false
   

my$("btn").addEventListener("click",function () {
//    console.log("小苏猥琐啊");
//  },false);
//  my$("btn").addEventListener("click",function () {
//    console.log("小苏龌龊啊");
//  },false);
//  my$("btn").addEventListener("click",function () {
//    console.log("小苏邪恶啊");
//  },false);
//  my$("btn").addEventListener("click",function () {
//    console.log("小苏下流啊");
//  },false);
输出结果：小苏猥琐啊
     小苏龌龊啊
     小苏邪恶啊
     小苏下流啊
复制代码

2. 对象.attachEvent("前缀有on的事件类型",事件处理函数)--谷歌不支持,火狐不支持,IE8支持
   参数1：String 事件的类型，如点击事件，鼠标进入事件，移除事件，事件前缀必须加on，如“onclick”，“onfocus”
   参数2：Function 事件处理函数(命名函数,匿名函数)
   

//  my$("btn").attachEvent("onclick",function () {
//    console.log("小杨好帅哦1");
//  });
//
//  my$("btn").attachEvent("onclick",function () {
//    console.log("小杨好帅哦2");
//  });
//
//  my$("btn").attachEvent("onclick",function () {
//    console.log("小杨好帅哦3");
//  });
输出结果：小苏猥琐啊
     小杨好帅哦1
     小杨好帅哦2
     小杨好帅哦3
复制代码

因此，其兼容代码

//为任意元素.绑定任意的事件, 任意的元素,事件的类型,事件处理函数
  function addEventListener(element,type,fn) {
    //判断浏览器是否支持这个方法，不能加(),否则就成调用了
    if(element.addEventListener){
      element.addEventListener(type,fn,false);
    }else if(element.attachEvent){
      element.attachEvent("on"+type,fn);
    }else{
      element["on"+type]=fn;
    }
  }

复制代码

转载于:https://juejin.im/post/5bbc7f335188255ca1539943