概念理解

• 事件的定義：使用者與瀏覽器產生的互動行為（點選、滾動滑鼠、鍵盤操作...
• 事件控制代碼：選擇監聽特定事件並在這些事件發生後進行相應處理
• 事件流：對事件的處理流程
• 事件處理方式：給元素新增事件的方式，又稱事件控制代碼、事件偵聽器、事件處理程式
• 事件註冊：事件繫結在某個元素上

繫結事件的方式

事件處理程式

• 指定為HTML元素的屬性
  • 優點：元素載入的同時被設定事件，而其他方法繫結事件是在js中繫結，沒執行到繫結程式碼前事件發生也不會觸發事件控制代碼
  • 缺點：強耦合，程式碼複用性低
  • 注意
    • 　　雖然html不區分大小寫，但在XHTML區分大小寫，為了提高相容性建議小寫
• 指定為DOM元素的屬性
  • 優點：js和html分離，提高可維護性
  • 注意事項
    • 事件名稱必須小寫
    • 指定的事件處理程式必須是匿名函式或函式名
    • 會覆蓋html指定的事件
• 注意事項
  • 當事件處理程式返回false時取消事件預設行為，如submit事件，在校驗表單內容時發現問題可返回false取消資料傳送

　　　　<a href="" onclick="return stop();"></a>

事件偵聽器（DOM2級事件）

• 優點
  • 一個元素能同時繫結多個偵聽器
  • 能控制是在捕獲階段還是在冒泡階段開始執行處理函式
• 注意事項
  • 在DOM level 2中第三個引數必須，在level 3中定義為省略則預設false
  • IE中沒有第三個引數，程式總是在冒泡階段執行處理函式
  • 雖然在DOM Level 3中將執行順序規定為與繫結順序相同，但仍建議和執行順序相關的處理放在同一個偵聽器中（不同瀏覽器規則有所不同）
  • 相同的事件偵聽器只有前面的生效
    • 　opera瀏覽器後面繫結的生效
  • 　　某些瀏覽器可將含有handleEvent方法的物件指定為偵聽器（雖然瀏覽器大多都支援，但與DOM定義略有違背

事件處理程式和事件偵聽器比較

　　一個元素只能繫結一個事件處理程式，而事件偵聽器能繫結多個，且事件偵聽器支援冒泡和捕獲。

操作事件的流程

1、誰被監督？（元素）

誰需要被監督？你？你爸爸？你兒子？

2、監督什麼？（觸發事件：點選、鍵盤按下..、滑鼠...）

需要監督的行為？玩手機？打遊戲？熬夜？

需要對方如何監督你？雲監督？24小時跟隨？
4、懲罰？（處理函式）

監督約定：當行為發生後該怎麼辦？火燒？碳烤？給ta頭上加個buff？

事件的傳播：捕獲階段---->目標階段---->冒泡階段

　　雖然可通過引數確定事件傳播機制，但傳播流程始終存在，引數選擇冒泡還是捕獲的區別僅在於在哪個階段開始執行處理函式，例如引數為true意味著在捕獲階段中，遇到的偵聽器都會執行，目標階段結束後則不再執行遇到的偵聽器。

取消事件的傳播

• event.stopPropagation()與event.stopImmediatePropagation()
• 區別：stopImmediatePropagation()在DOM level 3新引入，不僅阻止事件傳播，而且當前物件上繫結的其他待執行偵聽器也將停止執行。

常用事件型別與常用事件

• 資源事件
  • load
    • css、js動態載入
    • 資源預載入
  • unload
• 值變化事件
  • hashchange：位址列#號後值發生變化觸發
• 檢視事件
  • resize
  • scroll
• 焦點
  • focus
  • blur
• 滑鼠事件
  • click / dbclick
  • mousedown / mousemove /mouseup
  • mouseover / mouseout && mouseenter / mouseleave ：區別在於是否能被子元素觸發
• 鍵盤事件
  • keydown / keypress / keyup
• 觸控事件
  • touchstart
  • touchmove
  • touchend
• 儲存事件
  • change
• 表單事件
  • submit
  • reset
• DOM變異事件
  • DOMContentLoaded　　　　
    • 在DOM樹結構載入完即觸發（頁面從空白到顯示內容即觸發，DOM此時被構建好，可對所有DOM節點操作。
    • jQuery 中的 $(document).ready()監聽的就是此事件。
    • 首屏時間：頁面從空白到顯示內容花費的時間？
    • DOMContentLoaded被觸發前的時間。
    • js檔案放在開頭和結尾並不會影響首屏時間，只是為了更能保證找到DOM節點。

思考

• 事件的意義

　　　　Web應用程式通過事件驅動程式設計的方式實現功能。

• 事件偵聽器那麼好，那麼所有情況只需要用它就可以了嗎？DOM0級事件沒存在意義了嗎？該如何選擇？

　　　　新技術取代了舊技術但不代表不能用舊技術，條件允許情況下儘量用新技術，否則可降低標準使用舊技術。DOM0級事件雖比不上2級事件，但可用於相容性問題處理。

• 通過js給DOM元素新增事件為什麼叫DOM0級事件？

　　　　因為這種方法是在DOM Level 0中定義的

• 事件偵聽器為什麼叫DOM2級事件？為什麼不叫1級事件？

　　　　因為事件偵聽器這個方法是在DOM level 2中定義的方法，在DOM Level 1中沒有定義與事件相關的內容。

• 事件冒泡和捕獲有什麼意義？　　

　　　　為了實現事件委託：利用冒泡，間接觸發事件，不在自身身上新增事件，節省效能

• 圖片預載入到底優化體現在哪？

　　　　要分預載入的方案選擇：1、按需載入：先對主要內容進行載入，檢視外的內容等使用者瀏覽到時再載入，減少頻寬壓力。2、快取：將下載內容快取到本地，下次瀏覽時直接從本地獲取資源

• DOMContentLoaded為什麼比load快？如何忽略資源載入？DOM樹載入不也意味著資源載入完成了嗎？

　　　　主要是對html文件解析的流程不清晰，DOM樹載入完並不意味著資源載入完。