为元素绑定事件：
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=)