事件實現松耦合:
// JS和HTML之間的交互是通過事件實現的.
// 事件,就是文檔或瀏覽器窗口中發生一些特定的交互瞬間.
// 可以使用偵聽器來預定事件,以便事件發生時執行相應的代碼.
// 這種在傳統軟件工程中被稱為觀察員模式的模型,支持頁面的行為與頁面的外觀之間的松耦合
事件流:
// 多個瀏覽器開發團隊在看待瀏覽器事件上都保持同一個理念
// 當你點擊了某個按鈕,他們都認為單擊事件不僅僅發生在按鈕上
// 換句話說,在單擊按鈕的同時,你也單擊了按鈕的容器元素,甚至也單擊了整個頁面.
// 這樣會產生多個事件,按從頁面中接收事件的順序,產生了事件流的概念.
// 一個有趣的現象是,IE和Netscape2個開發團隊提出了完全相反的事件流的概念:事件冒泡和事件捕獲
事件冒泡:
// IE開發團隊定義的事件流,稱為事件冒泡,即:
// 事件開始時由最具體的元素接收,然后逐級向上傳播到較為不具體的節點.
<!DOCTYPE html>
<html><head><title>Event Bubbling Example</title></head><body><div id="myDiv">Click Me</div></body>
</html>// 以上DOM結構中,倘若你點擊了div元素,事件會按如下順序,依次執行:
// (1)div > (2)body > (3) html > (4)document
// 就像一個泡泡逐漸浮起來...
事件捕獲:
// 與IE團隊提出來的事件冒泡相反,Netscape Communicator團隊提出了另外一種事件流叫事件捕獲
DOM事件流:
// "DOM2級事件"規定的事件流包括三個階段:事件捕獲階段、處于目標階段和事件冒泡階段
// 首先發生的是事件捕獲,為捕獲事件提供了機會.(document > Html > body)
// 然后是實際的目標接收到事件.(div)
// 最后是事件的冒泡.(body > html > document)
// 多數支持DOM事件的瀏覽器都實現了一種特定行為(如:IE9、Safari、Chrome、Firefox和Opera9.5及更高版本)
// 它們會在捕獲階段觸發事件對象上的事件("DOM2級事件"規范明確要求捕獲階段不會涉及事件目標).
// 造成的結果是,有2個機會在目標對象上操作事件
事件處理程序:
// 事件:就是用戶或瀏覽器自身執行的某種動作.諸如:click、load和mouseover都是事件的名字.
// 事件處理程序:響應事件的函數
HTML事件處理程序:
// 某個元素支持的每種事件,都可以使用一個與相應事件處理程序同名的HTML特性來指定.
// 例如:要在按鈕被單擊時執行一些JavaScript
<input type="button" value="Click Me" onclick="alert('Clicked')" />// 在HTML中定義的事件處理程序既可以包含要執行的具體動作,也可以調用在頁面其他地方定義的腳本,
<script>function showMessaget(){alert('Hello Wordl!');}<input type='button' value="Click Me" onclick="showMessage()" />
</script>
// 在上面例子中,單擊按鈕就會調用showMessage()函數.這個函數是在一個獨立的<script>元素中定義的,當然也可以是一個外部文件.
// 事件處理程序中的代碼在執行時,有權訪問全局作用域中的任何代碼.
// 值得一提的是,在使用以上方法定義事件處理程序的同時,會有一個event的局部變量.使用如下將其打印出來:
<script>function showEvent(msg){console.log(msg);}
</script><input type="button" value="Click Me" onclick="showEvent(event)" />
// 還可以注意到上面input中有個value="Click Me". 可以通過this.value訪問到.
<input type="button" value="Click Me" onclick="console.log(this.value)" />
參考《JavaScript高級程序設計》(第3版)P346~P349
)
)
對象)
