事件模型

一、監聽函數

js 有三種方法，可以為事件綁定監聽函數

HTML 的 on- 屬性

元素節點的事件屬性，也可以指定監聽函數

EventTarget.addEventListener() DOM 節點實例的方法，有三個參數，分別事件類型、回調函數和表示是否在捕獲階段觸發的布爾值

上面三種方法，第一種違反了 HTML 和 JavaScript 相分離原則，不推薦。第二種方法，如果多次定義了同個屬性，后者會覆蓋前者，不推薦。

第三種方法有點：

• 同一事件可以添加多個監聽函數
• 能夠指定在哪個階段（捕獲階段還是冒泡階段）觸發監聽函數
• 除了 DOM 節點，其他對象（如window，XMLHttpRequest等）也有這個接口，它等于是整個 JavaScript 統一的監聽函數接口。

二、this 指向

監聽函數內部的this指向觸發事件的那個元素節點。

<button id="btn" onclick="console.log(this.id)">點擊</button>// btn 復制代碼

三、事件的傳播

一個事件發生后，會在子元素和父元素之間傳播，分為三個階段：

• 第一階段：從window對象傳導到目標節點（上層傳到底層），稱為“捕獲階段”（capture phase）
• 第二階段：在目標節點上觸發，稱為“目標階段”（target phase）
• 第三階段：從目標節點傳導回window對象（從底層傳回上層），稱為“冒泡階段”（bubbling phase）

四、事件代理

由于事件會在冒泡階段向上傳播到父節點，因此可以把子節點的監聽函數定義在父節點上，由父節點的監聽函數統一處理多個子元素的事件。這種方法叫做事件的代理（delegation）。

阻止事件冒泡使用event.stopPropagation

Event 對象

事件發生以后，會產生一個事件對象，作為參數傳給監聽函數。

一、實例屬性

• Event.bubbles返回布爾值，表示當前事件是否會冒泡

• Event.eventPhase返回一個整數常量，表示事件目前所處階段

  • 0，事件目前沒有發生。
  • 1，事件目前處于捕獲階段，即處于從祖先節點向目標節點的傳播過程中。
  • 2，事件到達目標節點，即Event.target屬性指向的那個節點。
  • 3，事件處于冒泡階段，即處于從目標節點向祖先節點的反向傳播過程中。

• Event.cancelable返回布爾值，表示事件可否取消。屬性只讀

• Event.preventDefault當上面的值為true時可以調用，用來取消事件。

• Event.cancelBubble屬性是一個布爾值，如果設為true，相當于執行Event.stopPropagation()，可以阻止事件的傳播。

• Event.currentTarget返回事件當前所在的節點，即正在執行監聽函數所綁定的節點。Event.target返回原始觸發事件的那個節點。

• Event.type返回一個表示事件類型的字符串

• Event.timeStamp返回一個毫秒時間戳，表示事件發生的時間。

• Event.isTrusted返回一個布爾值，表示事件是否由真實的用戶行為產生。

• Event.detail屬性只有瀏覽器的 UI 事件才具有，返回一個數值，表示事件的某種信息。

二、實例方法

• Event.preventDefault()取消瀏覽器對當前事件的默認行為。
• Event.stopPropagation()阻止事件冒泡
• Event.stopImmediatePropagetion阻止同一個事件的其他監聽函數被調用，不管監聽函數定義在當前節點還是其他節點。也就是說，該方法阻止事件的傳播，比Event.stopPropagation()更徹底。
• Event.composedPath()返回一個數組，成員是事件的最底層節點和依次冒泡經過的所有上層節點。

轉載于:https://juejin.im/post/5c7bb39fe51d453ed235edc8

總結

以上是生活随笔為你收集整理的JavaScript 复习之 事件模型 和 Event对象的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。