標籤：意義 htm script 操作 替代 blog type dom節點 執行
1.HTML事件處理常式
某個元素支援的某種事件，可以通過一個與相應事件處理常式同名的HTML特性指定。這個特性的值應該是能夠執行的JS代碼。例如：按鈕單擊是要執行一些js代碼，可以像下面：
<input type="button" value="click me" onclick="showMessage()" />
在js中就可以像下面一樣處理：
<script>
function showMessage(){
alert("hello function");
alert(this == window) // true
}
</script>
此時showMessage中的this指向的window，但是showMessage函數可以被多個元素同時調用。
但是此方法有的缺陷就是js和html耦合在一起，如果要更換事件處理常式，需要改html和js兩個地方。所以很多人喜歡用dom事件處理常式。
2. DOM0級事件處理常式
通過js指定事件處理常式的方式，就是將一個函數賦值給一個事件處理常式的屬性。
每個元素（包括window和document）都有自己的事件處理常式的屬性，這些屬性通常全部小寫，就像onclick，將這個屬性的值設定為一個函數，就可以指定事件處理常式。如下：
<html> <head></head> <body> <input type="button" value="click me2" id="btn2"> <script> var btn2 = document.getElementById("btn2"); btn2.onclick = function(){ console.log(this); } </script> </body></html>
上面的this輸出的結果是：<input type="button" value="click me2" id="btn2">，說明dom0級事件處理常式中的this指向的是當前元素本身，而不是windows，通過this可以訪問元素的任何屬性和任何方法。
3.DOM2級事件處理常式
DOM2級事件定義了兩個方法，用於處理指定和刪除事件處理常式的操作：addEventListener()和removeEventListener().所有的DOM節點都包含這兩個方法，並且接受3個參數，要處理的事件名，作為事件處理常式的函數和一個布爾值。最後一個布爾值如果是true，則表示在捕獲階段，是false則表示在冒泡階段。
<html> <head></head> <body> <input type="button" value="click me2" id="btn2"> <script> var btn2 = document.getElementById("btn2"); //addEventListener接受3個參數:要處理的事件名，作為事件處理常式的函數和一個布爾值。最後一個布爾值如果是true，則表示在捕獲階段，是false則表示在冒泡階段 btn2.addEventListener(‘click‘,function(){ console.log(this); }, false); </script> </body></html>
上面代碼輸出的結果和dom0級代碼輸出的結果一樣：<input type="button" value="click me2" id="btn2">，說明dom2級事件處理常式中的this指向的是當前元素本身，而不是windows。
注意：addEventListener()方法只能通過removeEventListener()方法來移除。
但是使用removeEventListener()方法移除事件的時候需要注意的一點：
<html> <head></head> <body> <input type="button" value="click me2" id="btn2"> <script> var btn2 = document.getElementById("btn2"); btn2.addEventListener(‘click‘,function(){ console.log(this); }, false); btn2.removeEventListener(‘click‘,function(){//沒有用 console.log(this); }, false); </script> </body></html>
上面的方法移除click事件是沒有用的，為什麼呢？因為addEventListener和removeEventListener的第二個參數需要同一個函數，而上面的代碼看似是同一個函數，其實不然，它們是功能相同的，但是是不同的匿名函數。如果需要正真移除事件處理常式，需要向下面這樣：
<html> <head></head> <body> <input type="button" value="click me2" id="btn2"> <script> var btn2 = document.getElementById("btn2"); var handler = function(){ console.log(this); } btn2.addEventListener(‘click‘, handler, false); btn2.removeEventListener(‘click‘,handler, false); </script> </body></html>
像上面一樣，就可以保證addEventListener和removeEventListener的第二個參數是同一個函數。
attachEvent()與detachEvent()
在早期的IE瀏覽器，如：IE8中，沒有實現addEventListener()和removeEventListener()，但提供了兩個替代方法attachEvent()和detachEvent()。由於Microsoft當前最新的系統Windows 10中，已放棄IE被edge瀏覽器替代，所在attachEvent()和detachEvent()已沒有意義。
上面的內容基本上是從《JavaScript進階程式設計》摘抄，在加上自己的一些理解。如果有錯誤，歡迎指正。
JS：Html事件處理常式 vs DOM0級事件處理常式 vs DOM2級事件處理常式
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
