jacascript事件的繫結
一、 使用物件.事件=函式的形式繫結響應函式
它只能同時為一個元素的一個事件繫結一一個響應函式，不能繫結多個，如果綁定了多個，則後邊會覆蓋掉前邊的
效果：不彈出1 直接彈出2
程式碼如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>事件的繫結</title> <script> window.onload= function (){ var btn = document.getElementById("btn"); btn.onclick =function (){ alert(1); } btn.onclick =function (){ alert(2); } } </script> </head> <body> <button id="btn">點選我</button> </body> </html>
二、通過該方法addEventListener()為元素新增繫結響應函式，可以繫結多個響應函式，會按照繫結的順序進行執行
引數一： 事件的字串（注意不要有on，，，比如onclick, 就寫“click”） 引數二；回撥函式，當事件觸發時會呼叫該函式 引數三：是否在捕獲階段觸發事件，需要一個布林值，一般都傳false
這個方法雖然好 但是IE8及其以下的不相容
效果圖
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>事件的繫結</title> <script> //addEventListener() /* 引數一： 事件的字串 引數二；回撥函式，當事件觸發時會呼叫該函式 引數三：是否在捕獲階段觸發事件，需要一個布林值，一般都傳false * */ window.onload= function (){ var btn = document.getElementById("btn"); btn.addEventListener("click",function(){ alert(1); },false); btn.addEventListener("click",function(){ alert(2); },false); } </script> </head> <body> <button id="btn">點選我</button> </body> </html>
三、attachEvent方法 (適用於ie8及其以下的瀏覽器)
這個方法各addEventListener其實是差不多的
這個IE8中可以使用這個函式
attachEvent() 引數一：事件的字串 要on 引數二：回撥函式
執行的順序是先繫結的後執行（其實我們不必要太糾結這個，執行的順序的問題，既然我們都把事件分開寫了，浪它執行的順序就沒有多大的關係，如果你就是要先繫結的先執行，你可以就寫在一個函式中）
效果圖
程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件的繫結</title>
<script>
/*
attachEvent()
引數一：事件的字串 要on
引數二：回撥函式
*/
btn.attachEvent("onclick",function(){
alert("1");
});
btn.attachEvent("onclick",function(){
alert("2");
});
btn.attachEvent("onclick",function(){
alert("3");
});
}
</script>
</head>
<body>
<button id="btn">點選我</button>
</body>
</html>
四、我們自己寫一個函式 相容所有的瀏覽器
引數一: obj要繫結事件的物件 引數二：evenStr 事件的字串 不要on 引數三：callback 回撥函式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件的繫結</title>
<script>
window.onload= function (){
bind(btn,"click",function(){
alert("1");
});
bind(btn,"click",function(){
alert("2");
});
bind(btn,"click",function(){
alert("3");
});
function bind (obj,evenStr,callback){
if(obj.addEventListener){
//正常的瀏覽器
obj.addEventListener(evenStr,callback,false);
}else{
//ie8的及其以下的
obj.addEventListener("on"+evenStr,callback);
}
}
}
</script>
</head>
<body>
<button id="btn">點選我</button>
</body>
</html>