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="https://www.cnblogs.com/jane-panyiyun/p/按鈕" id="btn"/> <script src="https://www.cnblogs.com/jane-panyiyun/p/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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/165105.html
標籤：JavaScript