原文网址：JS–DOM0, DOM1, DOM2, DOM3事件的区别与详解_IT利刃出鞘的博客-CSDN博客

简介

说明

本文介绍JavaScript中DOM0, DOM1, DOM2, DOM3事件级别的含义及区别。

DOM介绍

        DOM(Document Object Model，文档对象模型)是针对HTML文档和XML文档的一个API。DOM描绘了一个层次化的节点树，允许开发人员添加、移出和修改页面的某一部分。

        DOM脱胎于Netscape及微软公司创始的DHTML（动态HTML）。现在它已经成为表现和操作页面标记的真正跨平台、语言中立的方式。

DOM0

简介

        其实并没有一种标准叫“DOMLevel 0”，这只是DOM历史中的一个参照点。

Netscape Navigator 4和IE4分别发布于1997年的6月和10月发布的DHTML，它们是未形成标准的试验性质的初级阶段的DOM，这个DOM被公认为是DOM0。

DOM0的事件的特点：

• 效率高
• 兼容所有浏览器
• 同一个元素的同一种事件只能绑定一个函数（后面的函数会覆盖前边的函数）

事件

写法

写法1：标签

<input type="button" onclick="alert(0);" />

写法2：JS

<script>
  var btn = document.getElementsByClassName('button');
  btn.onclick = function(){
    alert(0);
  }
</script>

清理dom0的事件

只需给该事件赋值为 null

<script>
  var btn = document.getElementsByClassName('button');
  btn.onclick = null;
</script>

DOM1

简介

官网

Document Object Model (DOM) Level 1 Specification

简介

        大家熟知的Node，document, document.createElement都是在DOM1级别定义的。

        1998年 10月DOM1级规范成为W3C的推荐标准，为基本的文档结构及查询提供了接口，专注于HTML文档和XML文档。

        在DOM1中，DOM由两个模块组成：DOM Core（DOM核心）和DOM HTML。其中，DOM Core规定了基于XML的文档结构标准，通过这个标准简化了对文档中任意部分的访问和操作。DOM HTML则在DOM核心的基础上加以扩展，添加了针对HTML的对象和方法，如：JavaScript中的Document对象。

        每个节点都有nodeType属性，表示该节点的类型。

事件

DOM1一般只有设计规范没有具体实现。

DOM2

简介

事件

说明

1. 绑定事件：addEventListener(event, function, useCapture)
2. 清除事件：removeEventListener(event, function, useCapture)
3. 同一个元素的同种事件可以绑定多个函数，按照绑定顺序执行

        IE下的DOM2事件通过attachEvent绑定和 detachEvent 进行移除事件，他们接收的参数都一样。事件执行过程以及写法有所不同。IE9及之后的版本都能兼容 addEventListener了。

addEvenetListener()、removeEventListener() 有三个参数：

第一个参数：事件名（如click, IE是 onclick）；
第二个参数：事件处理程序函数；
第三个参数：true则表示在捕获阶段调用，false表示在冒泡阶段调用。

示例

<div id="box">点我</div>
<script>
 	var box = document.getElementById('box');
	box.addEventListener('click', fun1, false);
	box.addEventListener('click', fun2, false);
	function fun1() {
		console.log('方法1');
	}
	function fun2() {
		console.log('方法2');
	}
	// 执行方法1		
    // 执行方法2
    box.removeEventListener('click', fun2, false);
</script>

DOM3

简介

在DOM3中引入了以下模块：

1. DOM加载和保存模块（DOM Load and Save）：引入了以统一方式加载和保存文档的方法
2. DOM验证模块（DOM Validation）：定义了验证文档的方法
3. DOM核心的扩展（DOM Style）：支持XML 1.0规范，涉及XML Infoset、XPath和XML Base

另外，DOM3级事件在DOM2级事件的基础上添加了更多的事件类型

事件

        DOM3级事件在DOM2级事件的基础上添加了更多的事件类型。

        DOM3级也允许开发人员自定义事件。

DOM3级事件添加的事件类型如下：

DOM4

2015年11月19日， DOM4发布，详情可参见：W3C DOM4

DOM4增加了 Mutation Observers ，作为原来 Mutation Events的替代。