事件模型

一、監(jiān)聽函數(shù)

js 有三種方法，可以為事件綁定監(jiān)聽函數(shù)

HTML 的 on- 屬性

元素節(jié)點的事件屬性，也可以指定監(jiān)聽函數(shù)

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

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

第三種方法有點：

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

二、this 指向

監(jiān)聽函數(shù)內(nèi)部的this指向觸發(fā)事件的那個元素節(jié)點。

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

三、事件的傳播

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

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

四、事件代理

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

阻止事件冒泡使用event.stopPropagation

Event 對象

事件發(fā)生以后，會產(chǎn)生一個事件對象，作為參數(shù)傳給監(jiān)聽函數(shù)。

一、實例屬性

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

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

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

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

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

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

• Event.currentTarget返回事件當前所在的節(jié)點，即正在執(zhí)行監(jiān)聽函數(shù)所綁定的節(jié)點。Event.target返回原始觸發(fā)事件的那個節(jié)點。

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

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

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

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

二、實例方法

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

轉(zhuǎn)載于:https://juejin.im/post/5c7bb39fe51d453ed235edc8

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。