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事件模型。