在JavaScript中事件，指的是用户和网页发生交互时的一些行为，例如：鼠标点击、按下键盘按键、鼠标移动，这些行为就称之为事件，事件发生时，我们的程序也应该提供对应的处理方法。
1 事件监听
我们需要先监视网页上用户的这些行为，这样，当行为发生的时候，我们才能提供相应的处理方法，如果不监视，就无法获得用户的这些行为。
1.1 HTML事件监听
<div onclick="changeColor()">这是一个段落</div> // 点击变红
<script>
function changeColor(){
// 事件处理程序
var oDiv = document.getElementsByTagName(‘div‘)[0];
oDiv.style.color = ‘red‘;
}
</script>1.2 DOM0级事件监听
<div>这是一个段落</div>
<script>
var oDiv = document.getElementsByTagName(‘div‘)[0];
oDiv.onmouseover = function(){
oDiv.style.color = ‘green‘; // 鼠标移入，变绿色
}
oDiv.onmouseout = function(){
oDiv.style.color = ‘red‘; // 鼠标移出，变红色
}
</script>1.3 DOM2级事件监听
通过DOM对象.addEventListener()，针对主流浏览器（ie9+ Chrome、Firefox登录），非主流浏览器（IE6、7、8）使用attachEvent方法进行绑定。
通常在使用DOM2级事件绑定程序的时候，先判断一下是否是主流浏览器。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>DOM2级事件</title>
<style type="text/css">
#outer{width: 100px; height: 100px; border: 1px solid red;}
</style>
</head>
<body>
<div id="outer"></div>
<script>
var oDiv = document.getElementById(‘outer‘);
// 主流浏览器
if(window.addEventListener){
// 参数1：事件类型
// 参数2：事件发生时执行的函数
// 参数3：是否使用捕获。false不捕获（冒泡）,true 捕获
oDiv.addEventListener("mouseover", function(){
oDiv.style.backgroundColor = ‘pink‘;
}, false);
oDiv.addEventListener("mouseout", function(){
oDiv.style.backgroundColor = ‘orange‘;
}, false);
}else{
// 非主流浏览器（IE6、7、8）
// 参数1：事件类型（on）
// 参数2：事件发生时执行的函数
oDiv.attachEvent("onmouseover", function(){
oDiv.style.backgroundColor = ‘pink‘;
});
oDiv.attachEvent("onmouseout", function(){
oDiv.style.backgroundColor = ‘orange‘;
});
}
</script>
</body>
</html>