1. 為元素綁定事件的引入： 用src直接綁定多個，只實現最後一個（programmer2.js） <input type="button" value="按鈕" id="btn"/> <script src="common.js"></script> <script src="programmer ...
1. 為元素綁定事件的引入：
用src直接綁定多個，只實現最後一個（programmer2.js）
<input type="button" value="按鈕" id="btn"/> <script src="common.js"></script> <script src="programmer1.js"></script> <script src="programmer2.js"></script> <script> my$("btn").onclick=function () { console.log("小楊好帥哦"); }; </script>
2. 為元素綁定多個事件
為元素綁定事件(DOM) :一種, 但是不相容, 所以還是有兩種
1. 對象.addEventListener("事件類型", 事件處理函數, false); ----->谷歌和火狐支持, IE8不支持 2. 對象.attachEvent("有on的事件類型", 事件處理函數) ----->谷歌不支持, 火狐不支持, IE8支持2.1 對象.addEventListener("事件類型", 事件處理函數, false); ----->谷歌和火狐支持, IE8不支持
案例：為按鈕綁定點擊事件- 參數1:事件的類型---事件的名字,沒有on
- 參數2:事件處理函數---函數(命名函數,匿名函數)
- 參數3:布爾類型,目前就寫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.2 對象.attachEvent("有on的事件類型", 事件處理函數) ----->谷歌不支持, 火狐不支持, IE8支持
- 參數1:事件類型---事件名字，有on
- 參數2:事件處理函數---函數(命名函數,匿名函數)
my$("btn").attachEvent("onclick", function () {
console.log("小楊好帥哦1");
});
my$("btn").attachEvent("onclick", function () {
console.log("小楊好帥哦2");
});
my$("btn").attachEvent("onclick", function () {
console.log("小楊好帥哦3");
});
3. 為元素綁定事件的相容代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> </head> <body> <input type="button" value="按鈕" id="btn"/> <script src="common.js"></script> <script> //為任意元素.綁定任意的事件, 任意的元素,事件的類型,事件處理函數 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; } } addEventListener(my$("btn"),"click",function () { console.log("哦1"); }); addEventListener(my$("btn"),"click",function () { console.log("哦2"); }); addEventListener(my$("btn"),"click",function () { console.log("哦3"); }); </script> </body> </html>
