js中事件处理函数的总结

1.HTML事件处理

       直接添加到HTML结构中，不过这样的不利于保证HTML页面和JS的分离。不推介。

       demo:

               

2、DOM  0级事件处理函数

       把一个函数赋值给事件处理程序属性。js与页面分离的方法，但是不能够进行叠加，也就是对同一个Element赋值两个函数，第一个函数将被第二个覆盖。

      demo：

      

    运行

      demo：

       

  运行：

     

3、DOM 2级事件处理

    addEventListener("事件名","事件处理函数","布尔值")   ------添加事件

    removeEventListener("事件名","事件处理函数","布尔值")------移除事件

这两个函数中布尔值的参数可以省略。

DOM 2级事件处理弥补了DOM 0级事件处理会被覆盖的不足，DOM2级事件处理可以在同一个属性上添加1种或者1种以上的事件处理函数。

demo：

运行： 连续弹出两个Alert框。

移除是相同的用法。

4、IE事件处理程序

attachEvent("事件名","事件处理函数")   -----添加事件

detachEvent("事件名","事件处理函数") ----- 移除事件

这两个方法是IE版本小于等于8时可用。

  

注：在浏览器的兼容问题，可用一个if语句解决。