一、事件
1、什么是事件
事件是可以被JavaScript侦测到的行为。
2、常用事件
onClick 单击事件
onMouseOver 鼠标经过事件
onMouseOut 鼠标移出事件
onChange 文本内容改变事件
onSelect 文本框选中事件
onFocus 光标聚集事件
onBlur 移开光标事件
onLoad 网页加载事件
onUnload 关闭网页事件
二、事件流
1、事件流：
描述的是在网页中接受事件的顺序
2、事件冒泡：
由最具体的元素接受，然后逐级向上传播至最不具体的元素的节点（文档）
3、事件捕获：
最不具体的节点先接受事件，而最具体的节点应该是最后接受事件
三、事件处理
1、HTML事件处理：直接添加到HTML结构中
<body>
<button id="btn" onclik ="btnCliked">按钮</button> //直接添加到HTML结构中
<script>
var mytime=setInterval(function(){
getTime;
},1000);
function getTime(){
var d=new Date();
var t=d.toLocaleDateString();
document.getElementById("ptime").innerHTML=t;
}
</script>
</body>
这一方法缺点：修改时麻烦，需要同时修改两处
2、DOM0级事件处理：把一个函数赋值给一个事件处理程序属性
<body>
<button id="btn">按钮</button>
<script>
var btn=document.getElementById("btn");
btn.onclick=function (){alert("DOM0级事件处理")};
btn.onclick=null; //清除DOM0级事件
</script>
</body>
这一方法的缺点是，运行多个事件时，新事件会覆盖旧事件
3、DOM2级事件处理：addEventListener("事件名","事件处理函数","布尔值")
ture:事件捕获
false:事件冒泡
removeEventListener() 移除监听事件
<body>
<button id="btn">按钮</button>
<script>
var btn=document.getElementById("btn");
btn.addEventListener("click",demo1);
btn.addEventListener("click",demo2);
btn.addEventListener("click",demo3);
function demo1(){
alert("DOM2级事件处理程序1")
}
function demo2(){
alert("DOM2级事件处理程序2")
}
function demo3(){
alert("DOM2级事件处理程序3")
}
btn.removeEventListener("click",demo2)
</script>
</body>
这一方法可以依次执行多个事件，也可移除其中一个事件。
4、IE事件处理程序：
attchEvent
detachEvent
用法和addEventListener相同，只是用在ie8以下的浏览器
下面是一个兼容各种浏览器的监听事件代码：
<body>
<button id="btn">按钮</button>
<script>
var btn=document.getElementById("btn");
if(btn.addEventListener){
btn.addEventListener("click",demo);
}else if(btn.attachEvent){
btn.attachEvent("onclick",demo);
}else{
btn.onclick=demo();
}
function demo(){
alert("hello");
}
</script>
</body>
原文：http://www.cnblogs.com/pinuocaoyan/p/5041964.html