本文主要是介绍JavaScript 为元素绑定和解绑事件，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
为元素绑定事件：
1、对象.带on的事件类型 = 事件处理函数; 只能绑定一个事件处理函数，后面的会覆盖前面的。
2、对象.addEventListener("没有on的事件类型", 事件处理函数, false); ————谷歌、火狐、IE11支持，IE8不支持
可以绑定多个事件处理函数。
3、对象.attachEvent("带on的事件类型", 事件处理函数); ————谷歌、火狐、IE11不支持，IE8支持
可以绑定多个事件处理函数。
事件处理函数————是函数，可以是命名函数，也可以是匿名函数，但是在有对应的解绑事件的时候要用命名函数。
为同一个元素绑定多个相同的事件
addEventListener<!DOCTYPE html>
<html lang="en">
<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 lang="en">
<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 lang="en">
<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 lang="en">
<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 lang="en">
<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 lang="en">
<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>这篇关于JavaScript 为元素绑定和解绑事件的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
