HTML頁面是怎樣實現交互的？

2017-05-22

js事件之事件流：

事件流原理圖：事件流是從window開始，最後回到window的一個過程，分為三個階段(1~5)捕獲過程、(5~6)目標過程、(6~10)冒泡過程。

• 冒泡型事件：事件按照從最具體的事件目標到最不具體的事件目標(document對象)向上傳播的順序觸發。

IE 5.5: div -> body -> document

IE 6.0: div -> body -> html -> document

Mozilla 1.0: div -> body -> html -> document -> window

• 捕獲型事件(event capturing)：事件從最不具體的對象(document 對象)開始觸發。
• DOM事件流：同時支持兩種事件模型：捕獲型事件和冒泡型事件，但是，捕獲型事件先發生。兩種事件流會觸及DOM中的所有對象，從document對象開始，也在document對象結束。

tip：關於事件冒泡與捕獲詳細

js事件之事件處理程序

事件處理程序（handler），又事件偵聽器（listener）、事件句柄。響應點擊等事件的函數。

• HTML事件處理程序

eg： <input type="button" value="Click Here" onclick="alert(‘Clicked!‘);
 
" />

• DOM0級事件處理程序(通過JS將函數賦值給對象的事件)

1 var btn = document.getElementById("btn");
2 btn.onclick = function() {
3       alert(this.id);  
4 }

• DOM2級事件處理程序

DOM2級事件定義了兩個方法用於處理制定和刪除事件處理程序的操作：addEventListener和removeEventListener。所有的DOM節點都包含這兩個方法，並且都接收三個參數：事件類名、事件處理方法、一個布爾值。布爾參數true表示在捕獲階段調用事件處理程序；false表示在事件冒泡階段處理。

• IE事件處理程序

實現了DOM兩個類似的方法attachEvent和detachEvent，這兩個方法都接收兩個相同的參數，事件處理程序名稱和事件處理程序方法，由於IE指支持事件冒泡，所以添加的程序會被添加到冒泡階段。

• 跨瀏覽器的事件處理程序

跨瀏覽器的事件處理程序就是創建一個對象，存放用於添加、刪除事件處理程序的方法。方法接收三個參數：要操作的元素、事件名稱、事件處理程序函數

js事件之事件對象

在觸發DOM上的某個事件時，會產生一個事件對象event。這個對象中包含著所有與事件有關的信息。包括導致事件的元素，事件的類型以及其他與特定事件相關的信息。

js事件之事件委托

對多個DOM添加事件的解決方案。利用事件冒泡，只制定一個事件處理程序就可以管理某一類型的所有事件。

eg:
1 <ul id="list">
2     <li>item1</li>
3     <li>item2</li>
4     <li>item3</li>
5     <li>item4</li>
6 </ul>

利用事件委托,只需要給父級(ul)綁定一個事件監聽，即可讓每個（li）都綁定上相應的事件。
如果直接獲取li進行操作，則不符合性能優化，應盡量減少對DOM節點的操作。事件委托可以處理還未創建的子元素的事件，直接操作則不行。

js事件相關知識點總結