JavaScript中的DOM与事件

思考:上述的时间处理程序有什么缺点?
答:缺点有2个。①可能存在时差问题。考虑这样一种情形。show函数定义在按钮的后面,当DOM还没有加载到script标签的时候将会发生错误,此种情形可以通过内部添加try-catch来解决:;②拓展事件处理程序的作用链将会是浏览器不兼容的.

DOM0级事件处理程序

该种方式将一个函数赋值给一个事件处理程序的属性,比较简单,兼容性好,例如:

var btn = getElementById('btn')
btn.onclick = function () {
  console.log('clicked',this.id); // clicked btn
}

使用DOM0级方法指定的时间处理程序被认为是元素的方法.这个时候的事件处理程序是在元素作用域中运行(this指向当前元素).以这种方式添加的事件处理程序会在事件流的冒泡阶段被处理,删除事件处理程序只需要将事件处理程序的属性设置为null,例如:btn.onclick = null.

DOM2级事件处理程序

定义了2个方法addEventListener()和removeEventListener()用于指定或者删除事件处理程序.都接收3个参数:事件名,事件处理函数和布尔值(true,捕获阶段调用事件处理函数;false,冒泡阶段调用事件处理函数,缺省为false).这种方式可以弥补了DOM0中不能添加多个事件处理函数的不足:

var btn = getElementById('btn')
btn.addEventListener('click',function(){
  console.log(1);
})
btn.addEventListener('click',function(){
  console.log(2);
})
// 1 2

以上为btn添加了2个事件处理程序,这2个程序会按照它们的添加它们顺序触发.

IE事件处理程序

IE9之前的版本支持attachEvent()和detachEvent(),接收事件名(注意"on")和事件处理函数,只支持在冒泡阶段处理,和DOM0级事件的区别在于attachEvent()在全局作用域中运行,因此window === this,attachEvent也可以绑定多个事件,但是触发的顺序是与添加的时候相反的.

事件对象

兼容DOM的对象会将一个event对象传入到事件处理程序中(无论是DOM0还是DOM2),事件处理程序执行完后,event对象将被销毁;IE中的事件对象是window.event.在事件处理程序内部this === currentTarget,而target则表示的是事件的实际目标,我们来看下面的一个例子:

按钮

this和currentTarget都是body元素,因为事件是注册到body上的,而target却是按钮,因为它是事件的真是目标(最具体的元素).由于按钮上并没有注册处理程序,click事件就冒泡到了document.body并在那里得到处理.(在上面的例子中我们可以使用e.stopProgation()从而禁止事件传播)

其实,恰当使用能力检测就可以写出兼容代码,详见event.js