我們知道在JS中常用的事件有**：** 1. 頁面事件：load； 2. 焦點事件：focus，blur； 3. 滑鼠事件：click，mouseout，mouseover，mousemove等； 4. 鍵盤事件：keydown，keyup，keypress； 5. form表單事件：reset，submit； 6. 內容變化事件：change，input 那JS中**“事件物件”**，到底是個什麼東西？ * * * 首先，什麼是事件呢？ ---------- 首先說JS就是為了實現一些動態的操作，而使用者會有時候想去實現一些功能，如提交表單，滑鼠點選等，就要在瀏覽器中觸發這個事件，然後瀏覽器會感知（或者說捕獲）到使用者的這個行為，就會去響應處理這個事件。這個就稱之為**事件。** **那麼說，產生事件物件的原因是什麼？** --------------------- 事件的觸發，大部分情況下是使用者想去操作的一種行為，也就是說，**我們並不能確定使用者什麼時間觸發**；而且，**由於事件的傳播機制，我們甚至不能確定事件具體觸發在哪個節點**；這是一件令人很頭疼的事情； 為了解決這個問題，在事件發生以後，系統會呼叫我們寫好的**事件處理程式（一段程式碼）**來解決。 由此，引出了什麼是**事件物件**？ ------------------ 系統會在呼叫處理程式時，把**有關事件發生的一切資訊**，封裝成一個物件，作為**引數**，傳送給**監聽函式（事件處理程式）。**那麼說這個物件，稱之為**事件物件。** 根據事件型別的不同，事件物件中包含的資訊也有所不同；如點選事件中，包含滑鼠點選的橫縱座標位置，鍵盤事件中，包含鍵盤的鍵值等；

pppp

 現在瞭解了事件物件的含義後，我們來看看事件物件中都有哪些屬性和方法？ ---------------------------------- （1） 普通屬性: --------- * **event.bubbles**: 返回一個布林值，表示當前事件是否會冒泡; * **event.eventPhase**：返回一個整數值，表示事件流在傳播階段的位置 > 0:事件目前沒有發生。 > 1:事件目前處於捕獲階段。 > 2:事件到達目標節點。 > 3:事件處於冒泡階段。 * **event.type**: 返回一個字串，表示事件型別，大小寫敏感; * **event.timeStamp**: 返回一個毫秒時間戳，表示事件發生的時間; * **clientX、clientY** : 獲取滑鼠事件觸發的X,Y座標

事件物件

（2） **事件代理/委託屬性**: ------------------ * **event.target**：對事件觸發的引用，返回觸發事件發生的那個節點。（重點） * **event.currentTarget**：返回事件當前所在的節點，即正在執行的監聽函式所繫結的那個節點。（瞭解即可） ~~~ var d = document.getElementById('d'); d.onclick = function(e){ //返回事件節點 console.log(e.currentTarget); //返回觸發節點 console.log(e.target); } ~~~ 事件代理（事件委託）的含義：**由於事件會在冒泡階段向上傳播到父節點，因此可以把子節點的監聽函式定義在父節點上，由父節點的監聽函式統一處理多個子元素的事件**。這個方法叫做事件的代理也叫事件代理或者事件委託。 div3 div2 div1 根據上面的程式碼可以得到三個div的位置大概如下：點選每個div，每個div的整體就會變成紅色。主要是通過e.target返回了點選觸發的該節點。  （3）**阻止瀏覽器預設行為和阻止事件傳播的方法** -------------------------- * **event.preventDefault()**：該方法 阻止瀏覽器會執行當前事件的預設行為，比如點選連結後，瀏覽器跳轉到指定頁面；或者按一下空格鍵，頁面向下滾動一段距離。 * **event.stopPropagation()**：該方法 阻止事件在DOM結構中繼續傳播，防止再觸發定義在別的節點上的監聽函式。 ~~~ 2 1 我的皎月聞越想聞 ~~~ 使用事件物件，實現一個簡單的小案例：跟著滑鼠飛的div（通過修改事件物件的XY值） -----------------------------------------  點選前（不動）  點選後（跟著鼠