對同一個物件繫結多個響應事件並都執行，和此例子的相容程式碼
阿新 • • 發佈：2018-11-10
要點：
1.因為 onclick=" " 新增的元素響應事件，先新增的事件，會被後來新增的事件層疊掉，只能執行最後一個響應的事件
所以要用到事件監聽addElementLitener()來繫結多個處理函式，而因為相容性的問題需要相容程式碼。
2.在IE8中，addElementLitener()這個函式不被相容，而使用attachEvent()。但是，這個又不被谷歌，火狐相容，所以需要寫相容程式碼
3.addElementLitener() 有三個引數，而attachEvent()只有兩個引數，前一項的響應事件名前面不用加on，IE需要這是他自己因為違背標準指定的，其他版本是為了相容IE而做出的讓步
4.在瀏覽器不支援某個方法時，他會返回的是字串undefined
程式碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>繫結多個事件</title> </head> <body> <input type="button" value="點我不花錢" id="btn"> <script type="text/javascript"> function myGet(id){ return document.getElementById(id); } function addEventListener(element,type,fn){ // 這個自定義的函式跟下面的方法重名注意區分 if(typeof element.addEventListener != "undefined"){ // 一定要注意，undefined是字串型別，如果去掉在IE中死迴圈 element.addEventListener(type,fn,false); }else if(typeof element.attachEvent != "undefined"){ element.attachEvent("on"+type,fn); // 響應事件名字如click應該直接寫也能直接表達他的意思，而微軟非要在前面加一個"on" }else{ element["on"+type] = fn; // 如果瀏覽器上面兩個都不相容，只能寫這樣一種 } } addEventListener(myGet("btn"),"click",function () { console.log("陳小帥"); }); addEventListener(myGet("btn"),"click",function () { console.log("是真的"); }); addEventListener(myGet("btn"),"click",function () { console.log("真的好帥啊"); }); </script> </body> </html>
效果：
