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

271 阅读1分钟
  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);
输出结果:小苏猥琐啊
     小苏龌龊啊
     小苏邪恶啊
     小苏下流啊
  1. 对象.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;
    }
  }