DOM(Document Object Model，文档对象模型)是针对HTML文档和XML文档的一个API。DOM描绘了一个层次化的节点树，允许开发人员添加、移出和修改页面的某一部分，DOM脱胎于Netscape及微软公司创始的DHTML（动态HTML）。但现在它已经成为表现和操作页面标记的真正跨平台、语言中立的方式。

Netscape Navigator 4和IE4分别发布于1997年的6月和10月发布的DHTML，由于IE4和Netscape Navigator4分别支持不同的DHTML，为了统一标准，W3C开始制定DOM。1998年10月W3C总结了IE和 Navigator4的规范，制定了DOMLevel 1即DOM1，之前IE与Netscape的规范则被称为DOMLevel 0即DOM0。

DOM0级事件

假设页面中存在一个btn的按钮，并且给btn添加一个点击事件

1
2
3
btn.onclick = function(){
   console.log('this is a click event')
}

事件就是用户或浏览器自身执行的某种操作，如click、load、mouseover等，都是事件的名字，而响应某个事件的函数就被称为事件处理程序。

click事件过程

在上述的例子中，click事件并没有像其他函数一样，必须要调用才可以执行，click事件并不确定什么时候发生，而当浏览器发现用户点击该按钮时，浏览器就检测btn.onclick是否有值，如果有，就会执行btn.onclick.call(btn,event)，此时函数执行，call()方法接收两个参数，第一个指向调用当前方法的对象，也就是this。

需要注意的是，指定的this值并不一定是该函数执行时真正的this值，如果这个函数处于非严格模式下，则指定为null和undefined的this值会自动指向全局对象(浏览器中就是window对象)，同时值为原始值(数字，字符串，布尔值)的this会指向该原始值的自动包装对象。

另一个参数则是事件对象event，该对象也可以通过arguments[0]来访问，它包含了事件相关的所有信息，如本例子中，则包含了点击事件的全部信息。可以通过给函数传参来获取事件信息。

1
2
3
4
5
btn.onclick = function(e){
   console.log('this is a click event');
   console.log(e);  //  事件对象
    
}

但是在IE中，在使用DOM0级方法添加事件处理程序时，event是作window对象的一个属性而存在的。此时访问事件对象需要通过window.event。

1
2
3
btn.onclick = function(){
   console.log(window.event);  //  IE中事件对象    
}

在DOM0级中，如果想要实现一个对象绑定多个函数，可以这样实现。

1
2
3
4
5
6
7
8
9
10
function fn1(){
    // do something
}
function fn2(){
    // do something
}
btn.onclick = function(e){
  fn1.call(this,xxx);
  fn2.call(this.yyy);
}

DOM2级事件

W3C后来将DOM1升级为DOM2，DOM2级规范开始尝试以一种符合逻辑的方式来标准化DOM事件。DOM0级可以认为onclick是btn的一个属性，DOM2级则将属性升级为队列。
DOM2级事件定义了两个方法，用于处理指定和删除事件处理程序的操作，addEventListener()和removeEventListener()，所有的DOM节点中都包含这两个方法，它们都接收3个参数

  1. 要处理的事件名
  2. 作为事件处理程序的函数
  3. 布尔值，true代表在捕获阶段调用事件处理程序，false表示在冒泡阶段调用事件处理程序，默认为false。
1
2
3
4
5
6
btn.addEventListener('click',function(){
  //  do something
})
btn.addEventListener('click',function(){
  //  do something else
})

addEventListener()将事件加入到监听队列中，当浏览器发现用户点击按钮时，click队列中依次执行匿名函数1、匿名函数2。

1
2
3
4
5
6
7
8
function fn1(){
  //  do something
}
function fn1(){
  //  do something else
}
btn.addEventListener('click',fn1)
btn.addEventListener('click',fn2)

如果这样写，click队列中依次fn1.call(btn,event)，fn2.call(btn,event)。
通过addEventListener()添加的事件只能由removeEventListener()来移除，并且removeEventListener()只能移除具名函数，不能移除匿名函数。

IE中DOM2级事件

IE8及之前，实现类似addEventListener()和removeEventListener()的两个方法是attachEvent()和detachEvent()，这两个方法接受相同的两个参数

  1. 要处理的事件名
  2. 作为事件处理程序的函数

IE8之前的只支持事件冒泡，所以通过attachEvent()添加的事件处理程序只能添加到冒泡阶段。

1
2
btn.attachEvent('click',fn1)
btn.attachEvent('click',fn2)

当用户点击时，click队列依次fn1.call(undefined,undefined)，fn2.call(undefined,undefined)。
类似的detachEvent()也只能移除具名函数，不能移除匿名函数。

兼容处理

1
2
3
4
5
6
7
8
9
10
if(typeof btn.addEventListener === 'function'){
  btn.addEventListener('click',fn);
}else if(typeof btn.attachEvent === 'function'){
  btn.attachEvent('onclick',fn)
}else{
  btn.onclick=function(){
    // do something
  }
}