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高级程序设计那本书)

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