在JavaScript中，想要给元素添加一个事件，我们有两种方式
事件监听器
事件处理器
1.1事件处理器
在前面的事件中，如果想要给一个元素添加一个事件，我们都是通过操作HTML属性的方式来实现，这种方式其实也叫做“事件处理器”，例如：
oBtn.οnclick=function(){....};
事件处理器的用法非常简单，代码写起来也很好。不过这种添加事件的方式是由一定的缺陷的。
<!DOCTYPE >
<html>
<head>
<title ></title>
<meta charset="utf-8" />
<style type="text/css">
</style>
<script>
window.onload=function()
{
var oBtn=document.getElementById("btn");
oBtn.onclick=function()
{
alert("第1次");
};
oBtn.onclick=function()
{
alert("第2次");
};
oBtn.onclick=function()
{
alert("第3次")
};
}
</script>
</head>
<body>
<input id="btn" type="button" value="按钮" />
</body>
</html>
分析：
在这个例子中，我们是为了给按钮添加三次onclick事件，但JavaScript最终只执行了最后一次onclick.
事件监听器可以满足为一个元素添加多个事件。
1.2 事件监听器
1.绑定事件
所谓事件监听器，指的是使用addEventListener()方法来为一个元素添加事件，我们又称为“绑定事件”。
语法：
obj.addEventListener(type,fn,false)
说明：
obj是一个DOM对象，指的是使用getElementById(),getElementsByTagName()等方法获取到的元素节点。
type是一个字符串，指的是事件类型。例如单击事件用“click”，鼠标移入用“mouseover”等。一定要注意，这个事件类型是不需要加上on前缀。
fn是一个函数名，或者一个匿名函数。
false表示在事件冒泡阶段调用。对于事件冒泡，我们在JavaScript进阶再介绍。
例子
<!DOCTYPE >
<html>
<head>
<title ></title>
<meta charset="utf-8" />
<style type="text/css">
</style>
<script>
window.onload=function()
{
var oBtn=document.getElementById("btn");
oBtn.addEventListener("click",alertMes,false);
function alertMes()
{
alert("JavaScript");
}
}
</script>
</head>
<body>
<input id="btn" type="button" value="按钮" />
</body>
</html>
分析：
//fn是一个函数名
oBtn.addEventListener("click",alertMes,false);
function alertMes()
{
alert("JavaScript");
}
//fn是一个匿名函数
oBtn.addEventListener("click",function(){
alert("JavaScript")
},false);
实例：
<!DOCTYPE >
<html>
<head>
<title ></title>
<meta charset="utf-8" />
<style type="text/css">
</style>
<script>
window.onload=function()
{
var oBtn=document.getElementById("btn");
oBtn.addEventListener("click",alertMes2,false);
oBtn.addEventListener("click",alertMes1,false);
oBtn.addEventListener("click",alertMes,false);
function alertMes2()
{
alert("CSS");
}
function alertMes1()
{
alert("HTML");
}
function alertMes()
{
alert("JavaScript");
}
}
</script>
</head>
<body>
<input id="btn" type="button" value="按钮" />
</body>
</html>
分析：
当我们点击按钮后，浏览器会依次弹出三个对话框。即事件监听器可以做到为同一个元素，添加多个相同的事件。
在实际开发中，我们可能会使用多次window.onload.但是会发现JavaScript只执行最后一次window.onload。这个问题可以用addEventListener()来实现。
事实上，可以是使用addloadEvent()函数来实现。
//装饰者模式
function addloadEvent(func)
{
var oldonload=window.onload;
if(typeof window.onload!="function")
{
window.onload=func;
}
else
{
window.onload=function()
{
oldonload();
func();
}
}
}
然后我们只需要调用addLoadEvent()函数，就等于调用window.onload了。
addLoadEvent(function(){
.......
]);
2.解绑事件
在JavaScript中，我们可以使用removeEventListener()方法为元素解绑某个事件。
语法：
obj.removeEventListener(type,fn,false);
说明：
对于removeEventListener()方法来说，fn必须是一个函数名，不能是匿名函数。
例子
<!DOCTYPE >
<html>
<head>
<title ></title>
<meta charset="utf-8" />
<style type="text/css">
</style>
<script>
window.onload=function()
{
var oBtn=document.getElementById("btn");
var oDiv=document.getElementById("content");
//为div添加事件
oDiv.addEventListener("click",changeColor,false);
//点击按钮后，为div解除事件
oBtn.addEventListener("click",function(){oDiv.removeEventListener("click",changeColor,false);},false);
function changeColor()
{
this.style.color="hotpink";
}
}
</script>
</head>
<body>
<p id="content">绿叶学习网</p>
<input id="btn" type="button" value="解除" />
</body>
</html>
分析：
当我们点击“解除‘后，再点击p元素，就发现p元素的点击事件无效了。
如果想要使用removeEventListener()方法来解除一个事件，那么当初使用addEventListener()添加事件的时候，就一定要用定义函数的形式。
实际上，removeEventListener()只可以解除”件监听器“添加的事件，不可以解除“事件处理器”添加的事件。如果想解除事件处理器添加的事件，可以使用“obj.事件名=null;"来实现。