JS 為任意元素添加任意事件的兼容代碼
阿新 • • 發佈:2019-03-20
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 為任意元素添加任意事件的兼容代碼