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