初学JavaScript时，会用这样的方法监听事件
<html>
<head>
<meta charset="utf-8">
<title>js事件监听机制</title>
</head>
<body>
<input type="button" value="click me!" id="btn-1">
<script type="text/javascript">
btn1 = document.getElementById("btn-1");
btn1.onclick = function(){
alert("第一次点击按钮");
}
btn1.onclick = function(){
alert("第二次点击按钮");
}
</script>
</body>
</html>然而和想象中的结果并不相同，当点击按钮时，弹出窗口这样显示
这是因为当同一个对象用.onclick触发多个写法时，后面的方法会把前面的覆盖掉，当事件发生时，只会执行最后的绑定方法，在上面的例子中，后面的方法把前面的覆盖了，所以只出现了一个窗口。
对于这种现象，我们可以用以下的方式来解决
1.addEventListener
语法
target.addEventListener(type, listener, useCapture);
target：文档节点
type：事件名称，不含on，例如click，keydown
listener：调用的函数
useCapture：是否绑定在捕获阶段，默认为falsel
示例代码
<html>
<head>
<meta charset="utf-8">
<title>js事件监听机制</title>
</head>
<body>
<input type="button" value="click me!" id="btn-1">
<script type="text/javascript">
function eventFirst(){
alert("第一次点击按钮");
}
function eventSecond(){
alert("第二次点击按钮");
}
window.onload = function(){
btn1 = document.getElementById("btn-1");
btn1.addEventListener("click", eventFirst);
btn1.addEventListener("click", eventSecond);
}
</script>
</body>
</html>
点击确定
依次输出第一个监听事件和第二个监听事件
解除事件绑定
<span style="font-size:18px;">btn1.removeEventListener("click", eventFirst);</span>这样就解除了第一个监听事件的绑定
当点击按钮时，只输出第二个监听事件
注意：解除事件绑定时一定要用函数的句柄，否则解绑无效
2.attachEvent
IE浏览器使用attachEvent来绑定事件
语法
target.attachEvent(type, listener);
target：文档节点
type:事件名称，带on，比如onclick,onkeydown等等
listener：调用的函数
3.兼容各大主流浏览器的写法
通过以上的实验，最终对函数进行封装
代码如下
<html>
<head>
<meta charset="utf-8">
<title>js事件监听机制</title>
<style type="text/css">
#box{
height:100px;
width:100px;
background-color:red;
}
</style>
</head>
<body>
<div id="box">
<input type="button" value="click me!" id="btn-1">
</div>
<script type="text/javascript">
//监听元素事件函数
function addEventHandler(target, type, func){
if(target.addEventListener){
//兼容IE9，Firefox以及Chrome
target.addEventListener(type, func, false);
}else if(target.attachEvent){
//版本较低的IE浏览器
target.attachEvent("on" + type, func);
}else{
target["on" + type] = func;
}
}
//解除事件监听
function removeEventHandler(target, type, func){
if(target.removeEventListener){
target.removeEventListener(type, func, false);
}else if(target.detachEvent){
target.detachEvent("on" + type, func);
}else{
delete target["on" + type];
}
}
function eventFirst(){
alert("点击按钮");
}
function eventSecond(){
alert("点击div");
}
window.onload = function(){
btn1 = document.getElementById("btn-1");
box1 = document.getElementById("box");
//给按钮添加监听事件
addEventHandler(btn1, "click", eventFirst);
//给div添加监听事件
addEventHandler(box, "click", eventSecond);
//解除div的监听事件
removeEventHandler(box, "click", eventSecond);
}
</script>
</body>
</html>