关于JavaScript跨浏览器事件的处理

一、4种事件处理程序

事件就是用户或浏览器自身执行的某种操作，而事件处理程序即为响应某个事件的函数。事件处理程序大致分为5种：

1. HTML 事件处理程序
2. DOM 0级事件处理程序
3. DOM 2级事件处理程序
4. IE 事件处理程序

二、HTML 事件处理程序

什么是 HTML 事件处理程序呢？ 显然，HTML 事件处理程序是写在 HTML 标签内的函数。
HTML 事件处理程序有两种写法：

1. 最常见的是 HTML 中的事件处理

按钮1

2. 调用页面中的函数执行

按钮2

但是 HTML 事件处理程序存在着一些问题，比如修改时需要该动HTML代码和函数处理的的代码，比较麻烦。

三、DOM 0级事件处理程序（所有浏览器都支持）

DOM 0级事件处理程序是将一个函数赋值给一个事件处理程序属性。

我是DOM 0级事件处理程序

删除事件处理程序的方法是：

btn.onclick = null;

四、DOM 2级事件处理程序（只有IE9、chrome、safari和opera支持）

DOM 2级事件处理程序有两个方法：

1. addEventListener() //添加事件监听器
2. removeEventListener() //移除事件监听器

参数：

1. type --事件名，如：click、change、mouseover等
2. handler --事件处理函数
3. true/false --true:捕获阶段调用事件处理程序，false:冒泡阶段调用事件处理程序。

例子：

我是DOM 2级事件处理程序

五、IE事件处理程序

IE事件处理程序同样也有两个方法：

1. attachEvent() //添加事件
2. detaEvent() //移除事件

参数：

1. type --事件名，如：click、change、mouseover等
2. handler --事件处理函数

例子：

我是IE事件处理程序

六、跨浏览器事件处理程序

我是跨浏览器事件处理程序

注：要想弹出对话框就要注释掉调用移除函数的代码，比如：

eventUtil.removeHandler(btn, 'click', showMes);

希望本文对大家的学习能够有所帮助，感谢大家的阅览！

欢迎大家关注我的博客