js中dom0級事件和dom2級事件使用

1.dom0級事件

在介紹dom0級事件之前，先簡單介紹一下html事件，類似與一下代碼的事件都叫做html事件：

	<div οnclick="fun([實參])"></div>
		<script type="text/javascript">
			function fun([形參]){
//				代碼部分
			}
            </script>

以上的情況就叫做html事件，也算是比較常用的事件情況。

ok，下面介紹dom0級事件，直接看代碼比較清晰，類似與下面的代碼的情況：

		<div id="mydiv"></div>
		<script type="text/javascript">
			var mydiv=document.getElementById("mydiv");
			mydiv.οnclick=function(){
//				代碼部分
			}
			
		</script>

（名字是隨便起的，便於理解），還可以是一下這種情況：

		<div id="mydiv"></div>
		<script type="text/javascript">
			document.getElementById("mydiv").onclick = function() {
				//				代碼部分
			}
		</script>

這兩種情況本質上沒有區別，只是獲取多了一個獲取元素對象的過程。

2.dom2事件

1.其實從dom0級事件到dom2級事件，當中也經歷過dom1級事件，只不過沒什麼變化，所有也就忽略掉了。

如果要講解dom2級事件，就會牽扯到js中事件的嵌套和傳遞,。該篇只介紹dom2級事件，其他的可以去看上一篇博客。

dom2級事件是通過以下方法來實現的：

addEventListener('事件類型'，'函數名'，'true/false')

2.dom2級事件可以用於多重嵌套的事件中，最後一個參數true表示捕獲，false的話表示冒泡。如果不寫的話默認是冒泡的。而且使用dom2級事件還可以同時給同一個元素設置多個事件，類似下面代碼：

var oinput = document.getElementById("in");
			oinput.addEventListener('mouseover',f1);
			oinput.addEventListener('click',f2);
			oinput.addEventListener('click',f3);
			function f1(){
				oinput.style.width="300px";
				oinput.style.height="30px"
			}
			function f2(){
				oinput.style.background="red";
			}
			function f3(){
				oinput.style.border="3px solid yellow";
			}

爲了說明所以寫了很簡單的代碼，這些方法都會被調用，所以dom2級事件可以設置多個事件。

3.刪除事件

1.刪除dom0級事件：

document.getElement("..").οnclick=null

2.刪除dom2級事件：

removeEventListener('事件類型','函數名'，'true/false')

4.dom0級事件和dom2級事件的使用場景

其實這個應該是具體情況具體分析的，但是在使用dom0級事件的時候，這個只支持冒泡不支持捕獲。dom2級事件可以通過設置true/false來實現冒泡或者捕獲。但是注意

冒泡可以被阻止，捕獲不能被阻止。