JS的事件处理程序

1，
你点按钮的同时，也点了这个按钮所在的容器，这个过程就是一个事件流。事件流描述的是从页面中接收事件的顺序。
事件分两种：

IE（事件冒泡流）
Netscape（事件捕获流）

2，
事件处理程序

Html事件处理程序（事件直接加在html结构里的），比如：

<input type="button" value="按钮" id="btn" onclick="alert('hello')"/> 当然这种也可以写在script标签里面，例如：
<input type="button" value="按钮" id="btn" onclick="showMessage()"/>
<script>
function showMessage(){
alert("hello");
}
</script>
这种方式最大的缺点是html和js代码紧密的耦合在一起。如果需要改动，js和html代码都需要改动。

DOM0级事件处理程序（用的比较多）

这种是较为传统的处理方式，就是把一个函数赋给一个事件的处理程序属性，
事件其实是元素的属性，给按钮添加onclick属性，这个属性触发了一个事件处理程序
先把元素取出来，让这个事件以对象属性的形式去添加事件，这种方法叫DOM0级事件处理程序。比如：
<input type="button" value="按钮" id="btn2" />
<script>
var btn2=document.getElementById("btn2");
btn2.onclick=function(){ //执行一个匿名函数
alert("hello");
}
btn2.onclick=null;删除onclick属性
</script>

DOM2级事件处理程序（IE中不支持）

有两个方法：addEventListner()和removeEventListner(),接收三个参数：要处理的事件名（给谁添加,是点击还是鼠标滑过之类的）；作为事件处理的函数和布尔值，true表示在捕获阶段调用事件处理程序，false表示在冒泡阶段，比如：
<script>
var btn3=document.getElementById("btn3");
btn3.addEventListner('click',showMessage,false); //用冒泡可以兼容各种浏览器，函数后没有括号，这里的click没有on
btn3.addEventListner('click',function(){
alert(this.value); //这里的this就是引用被触发的元素
},false);
// 添加和删除传入相同的参数
btn3.removeEventListner ('click',showMessage,false);
</script>

DOM0和DOM2的优点是可以给元素添加多个事件处理程序，按顺序执行。

IE事件处理程序

两个方法：添加事件attachEvent()和删除事件detachEvent()，接收两个参数：事件处理名称和事件处理函数。没有第三个参数的原因：IE8以及更早的浏览器只支持时间冒泡。
比如：
这里的click前面又要加on了
btn3.attachEvent('onclick',showMessage);

跨浏览器的事件处理程序(p354,javascript高级程序设计那本书)

通过把添加和删除封装在一个对象里，每个方法都做了能力的检测，看支持哪个浏览器。