設置 JavaScript 對象屬性為事件處理程式： 1、註冊事件處理程式的最簡單方法就是通過設置事件目標的屬性為所需事件處理程式函數 2、這種事件處理程式註冊技術適用於所有瀏覽器的所有常用事件類型 3、事件處理程式屬性的缺點是其設計都圍繞著假設每個事件目標對於每種事件類型將最多只有一個處理程式 註 ...
設置 JavaScript 對象屬性為事件處理程式：
1、註冊事件處理程式的最簡單方法就是通過設置事件目標的屬性為所需事件處理程式函數
2、這種事件處理程式註冊技術適用於所有瀏覽器的所有常用事件類型
3、事件處理程式屬性的缺點是其設計都圍繞著假設每個事件目標對於每種事件類型將最多只有一個處理程式
註：事件處理程式是處理或響應事件的函數；事件目標是發生的事件或與之相關的對象；事件類型是一個用來說明發生什麼類型事件的字元串
事件處理程式屬性的名字由 "on" 後面跟事件名組成（區分大小寫，且所有都是小寫）：onclick、onchange 等
設置 HTML 標簽屬性為事件處理程式：
1、用於設置的文檔元素事件處理程式屬性也能轉換成對應 HTML 標簽的屬性
2、該屬性的值為 JavaScript 代碼字元串，且是事件處理函數的主體，而非完整的函數聲明
3、如果 HTML 事件處理程式屬性包含多條 JavaScript 語句，要記住必須使用分號分隔這些語句或斷開屬性值使其跨多行
4、如果把處理程式放到 <body> 標簽上，則瀏覽器會在 Window 對象上註冊它
註：客戶端編程的通用風格是保持 HTML 內容和 JavaScript 行為分離，所有我們應該儘量避免使用 HTML 事件處理程式屬性
addEventListener()：
1、除 IE8 及之前版本外的所有瀏覽器都支持的標準事件模型中，任何能成為事件目標的對象都定義了 addEventListener() 方法，使用這個方法可以為事件目標註冊事件處理程式
2、addEventListener(tpye, function, bool)，type 指定事件類型，它應該是不包含首碼 "on" 的字元串；function 指定類型事件發生時應該調用的函數；
bool 通常為 false，若為 true，則函數將註冊為捕獲事件處理程式，併在事件不同的調度階段調用
3、可以通過多次調用 addEventListener() 為同一個對象註冊同一事件類型的多個處理程式函數，所有該事件類型的註冊處理程式都會按註冊的順序調用
4、使用相同的參數在同一個對象上多次調用 addEventListener() 是沒用的，處理程式仍然只註冊一次，同時重覆調用也不會改變調用處理程式的順序
註： 通過 removeEventListener() 方法可以刪除事件處理程式，它同樣有三個參數
attachEvent()：
1、IE9 之前的 IE 不支持 addEventListener() 和 removeEventListener()，所有，IE5 及之後的版本定義了類似的方法 attachEvent() 和 detachEvent() 方法
2、它們只有兩個參數，因為 IE 事件模型不支持事件捕獲
3、IE 方法的第一個參數使用了帶 "on" 首碼的事件處理程式屬性名
4、允許相同的事件處理程式函數註冊多次，當特定的事件類型發生時，註冊函數的調用次數和註冊次數一樣
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/html"> <head> <meta charset="UTF-8"> <title>Event</title> <script> // 設置 Window 對象的 onload 屬性為一個事件處理程式 window.onload = function () { alert("載入完成"); } function myFunction() { let temp = document.getElementById("myP"); temp.innerText = "Paragraph's content is changed"; } </script> </head> <p> <p id="myP">This is a test paragraph</p> <!--設置 HTML 標簽屬性為事件處理程式--> <p><button onclick="myFunction()">click me to change</button></p> <p><div id="myDiv" style="width: 100px; height: 100px; background-color: lightpink">Hello Div</div></p> <p><button id="myButton">click me to change div</button></p> <script> let btn = document.getElementById("myButton"); // 使用 addEventListener() 來註冊處理函數 let handler = function () { let div = document.getElementById("myDiv"); div.style.textAlign = "center"; div.style.backgroundColor = "green"; }; if (btn.addEventListener) btn.addEventListener("click", handler, false); else if (btn.attachEvent) btn.attachEvent("onclick", handler); </script> </body> </html>
