[TOC] # 案例1：為網頁中所有按鈕添加點擊事件  ## 知識點1：事件三要素 1. 事件源 2. 事件 3. 事件處理程序 * [ ] 直接為事件源添加事件并調用**處理程序function** * [ ] 為事件源綁定事件并賦值**處理程序function** * [ ] 為事件源添加事件監聽并設置監聽**回調函數function** ## 知識點2：事件監聽 很多DOM元素可以被設計接收(或者監聽) 這些事件, 并且執行代碼去響應（或者處理）它們。通過`EventTarget.addEventListener()`方法可以將事件處理函數綁定到不同的`HTML elements`上 (比如`<button>`,`<div>`,`<span>`等等) 。除此之外，通過正確使用`removeEventListener()`方法，這些事件處理函數也能被移除。 1. EventTarget.addEventListener() 2. EventTarget.removeEventListener() ## 知識點3：事件模型 * [ ] 事件模型 1. 冒泡型（默認） 2. 捕獲型 ## 試一試：事件監聽與移除監聽  # 案例2：輸出按鈕信息  ## 知識點：事件對象 * [ ] 事件對象 1. `event` 表示在 DOM 中出現的事件。 2. `event.type`事件的類型，不區分大小寫。 3. `event.target`指向最初觸發事件的目標。 4. `event.currentTarget`總是指向事件綁定的元素。 # 案例3： 懸停染色  ## 知識點1：常見事件 | 事件 | 名稱 | | --- | --- | | onclick | 鼠標單擊 | | ondblclick | 鼠標雙擊 | | onmouseenter | 鼠標進入元素 | | onmouseover | 鼠標懸停元素(會產生事件冒泡） | | onmouseout | 鼠標移出元素 | ## 知識點2：over和enter的區別  ## 擴展：event.target和event.currentTarget > 子元素受父元素綁定事件的影響（事件委托） * [ ] e.target 觸發事件的元素 * [ ] e.currentTarget 綁定事件的元素   ## 試一試：阻止冒泡 `event.stopPropagation`阻止事件在 DOM 中繼續冒泡  > **js中事件是會冒泡的，所以this是可以變化的，但event.target不會變化，它永遠指向觸發事件的DOM元素本身；因此，this會產生冒泡，而event.target不會產生冒泡。** # 案例4：只能輸入數字 > 當輸入非數字時立即給出提示，并阻止輸入內容  ## 知識點1：常見鍵盤事件 | 事件 | 名稱 | | --- | --- | | onkeydown | 鍵盤按下 | | onkeyup | 鍵盤彈起 | | onkeypress | 鍵盤按下并釋放 | ## 知識點2：取消默認事件 > `event.preventDefault`取消默認事件 # 案例5：禁止粘貼復制  ## 知識點1：常見表單事件 | 事件 | 名稱 | | --- | --- | | onsubmit | 表單提交 | | onreset | 表單重置 | | onchange | 內容被改變并失去焦點 | | onblur | 失去焦點 | | onfocus | 獲得焦點 | | oncopy | 內容復制 | | onpaste | 內容粘貼 | ## 知識點2：鍵盤keyCode ``` event.keyCode 0-9：48-57 a-z：97-122 A-Z：65-90 ``` # 案例6：驗證用戶名是否被注冊  ## 知識點：常見頁面事件 | 事件 | 名稱 | | --- | --- | | onload | 頁面加載完畢 | * [ ] 用于初始化數據 * [ ] 用于自動運行腳本