1、綁定形式
ele.addEventListener(evtName, fn) ele["on" + evtName] = function () {} ele.onclick = function () {}
2、addEventListener：事件監聽器。 原事件被執行的時候，后面綁定的事件照樣被執行，不會被層疊掉
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <button>綁定事件</button> <script> var btnEle = document.getElementsByTagName("button")[0]; bindEvt2(btnEle, "click", fn1); bindEvt2(btnEle, "click", fn2); function fn1() { console.log("你是美麗的人"); } function fn2() { console.log("你是個壞人"); } function bindEvt2(ele, evtName, fn) { ele.addEventListener(evtName, fn); } </script> </body> </html>
//九尺龍泉萬卷書，上天生我意何如。 //不能報國平天下，枉為男兒大丈夫。
注意事項：ele["on" + evtName]與ele.onclick綁定的方式會層疊到之前的事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <button>點擊</button> <script> var btn=document.getElementsByTagName("button")[0]; btn.onclick=function () { console.log("你是美人"); } btn["onclick"]=function () { console.log("謝謝呀"); } </script> </body> </html>
//謝謝呀
3、addEventListener原理：之所以可以不層疊之前注冊事件，主要是判斷之前是否注冊了此類事件，如果注冊了就先執行此事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <button>點擊</button> <script> var btn = document.getElementsByTagName("button")[0]; btn.onclick = function () { console.log("你是美人"); } addEvent(btn, "click", fn); function addEvent(ele, evtName, fn) { var oldEvnet = ele["on" + evtName];//如果進入綁定事件本身，那么該事件已經本綁定了，所以獲取舊的事件必須在新的事件綁定之前 ele["on" + evtName] = function () { //如果沒有被定義過事件該事件源的該事件屬性應該是null對應的boolean值是false //如果已經定義過事件該事件源的該事件屬性應該是function本身對應的boolean值是true if (oldEvnet) { oldEvnet();//因為oldEvent本身他就是函數本身，那么后面加一個();就是執行函數 fn(); } else { fn(); } } } function fn() { console.log("謝謝呀") } </script> </body> </html>
//你是美人 //謝謝呀
4、事件綁定的兼容寫法
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <button>賦詩</button> <script> var btn = document.getElementsByTagName("button")[0]; // 火狐谷歌IE9+支持addEventListener // btn.addEventListener("click",fn1); // btn.addEventListener("click",fn2); // IE678支持attachEvent // btn.attachEvent("onclick",fn1); // btn.attachEvent("onclick",fn2); //兼容寫法 EventListen = { addEvent: function (ele,fn,str) { //通過判斷調用的方式兼容IE678 //判斷瀏覽器是否支持該方法，如果支持那么調用，如果不支持換其他方法 if(ele.addEventListener){ //直接調用 ele.addEventListener(str,fn); }else if(ele.attachEvent){ ele.attachEvent("on"+str,fn); }else{ //在addEventListener和attachEvent都不存在的情況下，用此代碼 ele["on"+str] = fn; } } } EventListen.addEvent(btn,fn1,"click") EventListen.addEvent(btn,fn2,"click") function fn1(){ console.log("九尺龍泉萬卷書，上天生我意何如。"); } function fn2(){ console.log("不能報國平天下，枉為男兒大丈夫。"); } </script> </body> </html>
//九尺龍泉萬卷書，上天生我意何如。 //不能報國平天下，枉為男兒大丈夫。
5、事件解綁方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <button>點擊</button> <script> var btn = document.getElementsByTagName("button")[0]; btn.onclick = function () { console.log("你是美人"); } btn.onclick = null; </script> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <button>賦詩</button> <script> var btn = document.getElementsByTagName("button")[0]; EventListen = { addEvent: function (ele, fn, str) { //通過判斷調用的方式兼容IE678 //判斷瀏覽器是否支持該方法，如果支持那么調用，如果不支持換其他方法 if (ele.addEventListener) { //直接調用 ele.addEventListener(str, fn); } else if (ele.attachEvent) { ele.attachEvent("on" + str, fn); } else { //在addEventListener和attachEvent都不存在的情況下，用此代碼 ele["on" + str] = fn; } }, removeEvent: function (ele, fn, str) { if (ele.removeEventListener) { ele.removeEventListener(str, fn); } else if (ele.detachEvent) { ele.detachEvent("on" + str, fn); } else { ele["on" + str] = null; } } } EventListen.addEvent(btn, fn, "click"); EventListen.removeEvent(btn, fn, "click"); function fn() { alert(1); } </script> </body> </html>
注意事項：ele.onclick只能用ele.onclick=null，removeEvent只能解綁addEventListener，detachEvent只能解綁attachEvent。