DOM0級事件處理程序:

// 使用DOM0級方法指定的事件處理程序被認為是元素的方法
// 這個時候的事件處理程序是在元素的作用域中運行:
<div id = "myBtn" >DOM0</div>
<script>var btn = document.getElementById("myBtn");btn.onclick= function () {console.log(this);}
</script>

// 注1:以上生成的DOM真的能點擊,給它加上一個style="cursor: pointer;"就成了一個像按鈕的假按鈕..(扯遠了...)
// 注2:回歸正題,可以看見,此時的this(執行環境)其實是dom元素的作用域.
// 注3:以DOM0級方式添加的事件,會在事件流的冒泡階段被處理.

DOM2級處理程序:

// "DOM2級事件"定義了兩個方法,用于處理指定和刪除處理程序的操作:addEventListener()和removeEventListener().
// 所有的DOM元素都包含這兩個方法
// 這兩個方法均接受三個參數,分別是:事件名、處理函數、和一個布爾值(true:捕獲階段執行,false:冒泡階段執行)
<div id ="myBtn">DOM2 =></div>
<script>// 箭頭函數寫法const btn = document.getElementById("myBtn");btn.addEventListener("click", ()=>{console.log("=>",this);}, false);
</script><div id ="myBtn1">DOM2 bubble</div>
<script>// 函數寫法(冒泡階段執行)const btn1 = document.getElementById("myBtn1");btn1.addEventListener("click",function (){console.log("bubble: ",this);}, false);
</script><div id ="myBtn2">DOM2 capture</div>
<script>// 函數寫法(捕獲階段執行)const btn2 = document.getElementById("myBtn2");btn2.addEventListener("click",function (){console.log("capture: ",this);}, true);
</script>

// 注1:箭頭函數的作用域是聲明時候的作用域,普通函數則是執行時的作用域

跨瀏覽器事件處理程序:

// IE提供了2個不同的事件處理程序attachEvent()和deleteEvent(),
// DOM2級提供了2種addEventListener()和removeEventListener()
// 下面根據特性寫一個兼容的跨瀏覽器的添加的事件處理程序
const l_addEvent = function (element, type, handler){if( element.addEventListener) {   // DOM2element.addEventListener(type, handler, false) ;    // 冒泡階段執行} else if(element.attachEvent) {   // IEelement.attachEvent("on" + type, handler);} else {   // DOM0element["on" + type] = handler;}
}

參考《JavaScript高級程序設計》(第3版)P350~P354