為元素綁定事件：
1、對象.帶on的事件類型 = 事件處理函數; 隻能綁定一個事件處理函數，後面的會覆寫前面的。
2、對象.addEventListener("沒有on的事件類型", 事件處理函數, false); ————谷歌、火狐、IE11支援，IE8不支援
可以綁定多個事件處理函數。
3、對象.attachEvent("帶on的事件類型", 事件處理函數); ————谷歌、火狐、IE11不支援，IE8支援
可以綁定多個事件處理函數。
事件處理函數————是函數，可以是命名函數，也可以是匿名函數，但是在有對應的解綁事件的時候要用命名函數。
為同一個元素綁定多個相同的事件
addEventListener
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="按鈕" id="btn"/>
<script>
var btn = document.getElementById("btn");
btn.addEventListener("click", function(){
console.log("我是addEventListener事件一");
}, false);
btn.addEventListener("click", function(){
console.log("我是addEventListener事件二");
}, false);
btn.addEventListener("click", function(){
console.log("我是addEventListener事件三");
}, false);
btn.addEventListener("click", function(){
console.log("我是addEventListener事件四");
}, false);
</script>
</body>
</html>
attachEvent
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="按鈕" id="btn"/>
<script>
var btn = document.getElementById("btn");
btn.attachEvent("onclick", function(){
console.log("我是attachEvent事件一");
});
btn.attachEvent("onclick", function(){
console.log("我是attachEvent事件二");
});
btn.attachEvent("onclick", function(){
console.log("我是attachEvent事件三");
});
btn.attachEvent("onclick", function(){
console.log("我是attachEvent事件四");
});
</script>
</body>
</html>
addEventListener() 和 attachEvent() 的總結：
相同點：都可以為元素綁定事件
不同點：
1、方法名字不一樣。
2、參數個數不一樣，addEventListener有三個參數，attachEvent有兩個參數。
3、addEventListener參數中的事件類型（事件的名字）沒有on，attachEvent參數中的事件類型（事件的名字）有on。
4、addEventListener 谷歌、火狐、IE11支援，IE8不支援，attachEvent 谷歌、火狐、IE11不支援，IE8支援。
5、this不同，addEventListener 中的this是目前綁定事件的對象，但attachEvent 中的this是window。
為元素解綁事件：
要注意，用什麼方法綁定的事件，就用什麼方法解綁。
方法一：通過DOM元素的onclick等事件屬性，為元素綁定事件。
綁定事件：對象.on事件名字=事件處理函數
解綁事件：對象.on事件名字=null；
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id="btn1">綁定事件</button>
<button id="btn2">解綁事件</button>
<script>
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
//綁定事件
btn1.onclick = function(){
console.log("綁定了onclick事件");
};
btn2.onclick = function(){
//解綁事件
btn1.onclick = null;
};
</script>
</body>
</html>
方法二：addEventListener 和 removeEventListener
綁定事件：對象.addEventListener("沒有on的事件類型", 命名函數, false);
解綁事件：對象.removeEventListener("沒有on的事件類型", 函數名字, false);
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id="btn1">綁定事件</button>
<button id="btn2">解綁事件</button>
<script>
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
function f1(){
console.log("事件一");
}
function f2(){
console.log("事件二");
}
function f3(){
console.log("事件三");
}
//綁定事件
btn1.addEventListener("click", f1, false);
btn1.addEventListener("click", f2, false);
btn1.addEventListener("click", f3, false);
//點選第二個按鈕，解綁事件
btn2.onclick = function(){
//有解綁事件的，需要在綁定事件的時候使用命名函數
btn1.removeEventListener("click", f2, false);
};
</script>
</body>
</html>
方法三：attachEvent 和 detachEvent
綁定事件：對象.attachEvent("on事件類型", 命名函數 );
解綁事件：對象.detachEvent("on事件類型", 函數名字);
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id="btn1">綁定事件</button>
<button id="btn2">解綁事件</button>
<script>
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
function f1(){
console.log("事件一");
}
function f2(){
console.log("事件二");
}
function f3(){
console.log("事件三");
}
//綁定事件
btn1.attachEvent("onclick", f1);
btn1.attachEvent("onclick", f2);
btn1.attachEvent("onclick", f3);
//點選第二個按鈕，解綁事件
btn2.onclick = function(){
//有解綁事件的，需要在綁定事件的時候使用命名函數
btn1.detachEvent("onclick", f2);
};
</script>
</body>
</html>
相容代碼
綁定事件：為任意元素綁定任意事件
//為任意元素綁定任意事件，參數：元素，不帶on的事件類型，事件處理函數
function addEvent(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;
}
}
解綁事件
//為任意元素解綁任意事件，參數：元素，不帶on的事件類型，事件處理函數名字
function removeEvent(element, type, fnName){
if(element.removeEventListener){
element.removeEventListener(type, fnName, false);
}else if(element.detachEvent){
element.detachEvent("on"+type, fnName);
}else{
element["on"+type] = null;
}
}
案例：
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id="btn1">綁定事件</button>
<button id="btn2">解綁事件</button>
<script>
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
function f1(){
console.log("事件一");
}
function f2(){
console.log("事件二");
}
function f3(){
console.log("事件三");
}
//綁定事件
addEvent(btn1, "click", f1);
addEvent(btn1, "click", f2);
addEvent(btn1, "click", f3);
//點選第二個按鈕，解綁事件
btn2.onclick = function(){
//有解綁事件的，需要在綁定事件的時候使用命名函數
removeEvent(btn1, "click", f2);
};
//為任意元素綁定任意事件，參數：元素，不帶on的事件類型，事件處理函數
function addEvent(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;
}
}
//為任意元素解綁任意事件，參數：元素，不帶on的事件類型，事件處理函數名字
function removeEvent(element, type, fnName){
if(element.removeEventListener){
element.removeEventListener(type, fnName, false);
}else if(element.detachEvent){
element.detachEvent("on"+type, fnName);
}else{
element["on"+type] = null;
}
}
</script>
</body>
</html>
任何浏覽器都支援該相容代碼。
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)