DOM0 DOM2、DOM3详细介绍与区别
1、定义：
1.1 0级DOM — DOM0
0级 DOM 分为2个：
- 一是在标签内写onclick事件
- 二是在JS写onlicke=function（）{}函数
1）
<input type="button" onclick="alert(0);" />
2）
<script>
var btn = document.getElementsByClassName('button');
btn.onclick = function(){
alert(0);
}
</script>
1.2、2级DOM —DOM2
2级DOM 监听方法，原生有两个方法用来添加和移除事件处理程序：addEventListener()和removeEventListener()。IE下的DOM2事件通过attachEvent绑定和 detachEvent 进行移除事件，他们接收的参数都一样。事件执行过程以及写法有所不同
注意： IE9及之后的版本都能兼容 addEventListener了
addEvenetListener()、removeEventListener() 有三个参数：
第一个参数是事件名（如click, IE是 onclick）；
第二个参数是事件处理程序函数；
第三个参数如果是true则表示在捕获阶段调用，为false表示在冒泡阶段调用。
addEventListener(‘onclick’, handle):可以为元素添加多个事件处理程序，触发时会按照添加顺序依次调用。
removeEventListener(‘onclick’, handle):不能移除匿名添加的函数。
这里我们不需要传入第三个参数，因为IE8级以下版本只支持冒泡型事件。
<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', fun1, false)
</script>
attachEvent(): 里面的第一个参数是onclick而不是和addEventListener()中的click一样；
<div id="btn">Hello</div>
<script type="text/javascript">
var btn = document.getElementById('btn');
console.log(window.attachEvent);
console.log(window.detachEvent);
btn.attachEvent('onclick',function(){
console.log('bangbang');
console.log(this); //window
});
btn.attachEvent('onclick',function(){
console.log('YYY');
console.log(this); //window
});
// attachEvent 执行的顺序 是 先 打印 YYY 再打印 bangbang
// IE8 及以前移除事件的方法
btn.detachEvent('onclick', function(){});
</script>
attachEvent 执行事件的顺序是从后往前的，跟addEventListener 刚好相反
attachEvent()与DOM0 区别
attachEvent()使用和使用DOM0级的区别主要在于事件处理程序的作用域。在使用DOM0级方法情况下，事件处理程序会在其所属的作用域内运行；在使用attachEvent()方法的情况下，事件处理程序会在全局作用域中运行，因此这里面的this相当于window。
只有2级DOM包含3个事件：事件捕获阶段、处于目标阶段和事件冒泡阶段, DOM0 不包含
<span>
<a></a>
</span>
点击a后capturing(捕捉)阶段事件传播会从document-> span->a，然后发生在a，最后bubbling(冒泡)阶段事件传播会从a->span->document
DOM0 与DOM2区别
区别：
如果定义了两个dom0级事件，dom0级事件会覆盖
dom2不会覆盖，会依次执行
dom0和dom2可以共存，不互相覆盖，但是dom0之间依然会覆盖
DOM3
DOM3级事件在DOM2级事件的基础上添加了更多的事件类型，全部类型如下：
| 事件类型 | 说明 | 举例 |
|---|---|---|
| UI事件 | 当用户与页面上的元素交互时触发 | load、scroll |
| 焦点事件 | 当元素获得或失去焦点时触发 | blur、focus |
| 鼠标事件 | 当用户通过鼠标在页面执行操作时触发 | dbclick、mouseup |
| 滚轮事件 | 当使用鼠标滚轮或类似设备时触发 | mousewheel |
| 文本事件 | 当在文档中输入文本时触发 | textInput |
| 键盘事件 | 当用户通过键盘在页面上执行操作时触发 | keydown、keypress |
| 合成事件 | 当为IME（输入法编辑器）输入字符时触发 | compositionstart |
| 变动事件 | 当底层DOM结构发生变化时触发 | DOMsubtreeModified |
同时DOM3级事件也允许开发人员自定义一些事件。
为什么没有DOM1级事件处理呢？
因为1级DOM标准中并没有定义事件相关的内容，所以没有所谓的1级DOM事件模型。