javascript事件处理程序实例分析

javascript事件处理函数，javascript与html之间通过事件交互。
所谓事件就是用户或浏览器自身执行的某种动作，比如click、mounseover、load……,而响应事件的函数就叫做事件处理函数（或事件侦听器）。

html事件处理程序：
 

在html代码中去调用：
 

在html中指定事件处理函数有两个缺点：
1、存在时差的问题，以上面的例子来说，假设showmessage()函数定义在页面的最底部，如果用户在解析showmessage()函数之前就单击了按钮，这样就会引发错误。
为此，很多html事件处理函数都会封闭在try -catch 块中，这样错误就不会暴露出来了，如下：
 

2、html代码与javascript代码紧密耦合，如果要更新事件处理函数，就需要更新更新两处位置。
由于存在这两个问题，我们在实际的工作中一般比较少用这种事件处理方式。

dom0级事件处理程序：
 

将一个函数赋值给一个事件处理程序的属性，由于该方法至今的所有现在浏览器都支持，具有使用简单，跨浏览器的优势！使用dom0级方法指定的事件处理程序被认为是元素的方法，这个时候事件都是在元素的作用域中运行的，也就是说程序中的this引用当前的元素。

也可以删除通过dom0级方法指定的事件处理程序，如下：
 

dom2级事件处理程序：
dom2级事件定义了两个方法：addeventlistener()、removeeventlistener()
要在按钮上为click添加事件处理程序，可以使用如下代码：
 

因为第三个参数为false，所以事件会在冒泡阶段触发。使用dom2级事处理程序的好处是可以添加多个事件处理程序。
同样，可以通过removeeventlistener()来移除事件处理程序，如下：
 

ie事件处理程序
ie中实现了与dom类似的两个方法，attachevent, deatachevent()，如下代码所示：
 

跨浏览器的事件处理程序：

由于dom2级事件处理程序与ie中的事件处理程序不同，我们可能利用能力检测统一事件处理程序，如下代码所示：
 

dom中的事件对象：
兼容dom的浏览器会有一个event对象传入到事件处理程序中，无论指定的事件处理程序时使用何方法，都会传入event对象，我们常用的event对象的属性及方法有：
1、currenttarget: 其事件处理程序当前正在处理事件的那个元素;
2、target: 事件的目标;
3、preventdefault(): 取消事件的默认行为;
4、stoppropagation(): 取消事件进一步捕获划冒泡。

ie浏览器事件对象：
与dom中的事件对象一样，ie中的事件对象同样有以上属性或方法，但是实现起来有些不一样，以下是他们间的对应关系：
1、srcelement <=> target;
2、returnvalue = false <=> preventdefault();
3、cancelbubble = true <=> stoppropagation();

跨浏览器的事件对象：
由于dom中的事件对象与ie中存在差异，我们同样可以利用能力检测的方法来统一事件对象中常用的属性和方法(eventutil.js)：
 

例子，演示如何使用自定义的eventutil对象？