1. 程式人生 > >JS 為任意元素添加任意事件的兼容代碼

JS 為任意元素添加任意事件的兼容代碼

false 概念 UNC lean type ons asc 不兼容 btn

為元素綁定事件(DOM):一種,但是不兼容,有兩種 1 對象.addEventListener("事件類型",事件處理函數,false);   谷歌和火狐支持,IE8不支持;     為按鈕綁定點擊事件       參數1:事件的類型---事件的名字,沒有on       參數2:事件處理函數---函數(命名函數,匿名函數)       參數3:Boolean類型,是否使用捕獲,一般用false 。這裏涉及到JavaScript事件流的概念,後續章節將會詳細講解。
//為同一個元素綁定多個相同的事件--
 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:事件類型---事件名字,有on
    參數2:事件處理函數---函數(命名函數,匿名函數)

my$("btn").attachEvent("onclick",function () {
   console.log("小米一歲了");
 });

 my$("btn").attachEvent("onclick",function () {
   console.log("小米二歲了");
 });

 my$(
"btn").attachEvent("onclick",function () { console.log("小米三歲了"); });

3 為了解決這個兼容的問題:

//element 為要綁定事情的元素 type 為綁定那種事件 func  事件的處理函數
  function addEventListener(element,type,func) {
    //判斷瀏覽器是否支持這個方法
    if(element.addEventListener){
      element.addEventListener(type,func,false);
    }else if(element.attachEvent){
      element.attachEvent("on"+type,func);
    }else{
      element["on"+type]=func;
    }
  }

JS 為任意元素添加任意事件的兼容代碼