摘要：事件與節點每個瀏覽器事件處理器被注冊在上下文中。事件對象雖然目前為止我們忽略了它，事件處理器函數作為對象傳遞事件對象。若事件處理器不希望執行默認行為通常是因為已經處理了該事件，會調用事件對象的方法。

來源：ApacheCN『JavaScript 編程精解 中文第三版』翻譯項目
原文：Handling Events
譯者：飛龍
協議：CC BY-NC-SA 4.0
自豪地采用谷歌翻譯
部分參考了《JavaScript 編程精解（第 2 版）》
你對你的大腦擁有控制權，而不是外部事件。認識到這一點，你就找到了力量。
馬可·奧勒留，《沉思錄》

有些程序處理用戶的直接輸入，比如鼠標和鍵盤動作。這種輸入方式不是組織整齊的數據結構 - 它是一次一個地，實時地出現的，并且期望程序在發生時作出響應。

想象一下，有一個接口，若想知道鍵盤上是否有一個鍵是否被按下，唯一的方法是讀取那個按鍵的當前狀態。為了能夠響應按鍵動作，你需要不斷讀取鍵盤狀態，以在按鍵被釋放之前捕捉到按下狀態。這種方法在執行時間密集計算時非常危險，因為你可能錯過按鍵事件。

一些原始機器可以像那樣處理輸入。有一種更進一步的方法，硬件或操作系統發現按鍵時間并將其放入隊列中。程序可以周期性地檢查隊列，等待新事件并在發現事件時進行響應。

當然，程序必須記得監視隊列，并經常做這種事，因為任何時候，按鍵被按下和程序發現事件之間都會使得軟件反應遲鈍。該方法被稱為輪詢。大多數程序員更希望避免這種方法。

一個更好的機制是，系統在發生事件時主動通知我們的代碼。瀏覽器實現了這種特性，支持我們將函數注冊為特定事件的處理器。

Click this document to activate the handler.

window綁定指向瀏覽器提供的內置對象。 它代表包含文檔的瀏覽器窗口。 調用它的addEventListener方法注冊第二個參數，以便在第一個參數描述的事件發生時調用它。

每個瀏覽器事件處理器被注冊在上下文中。在為整個窗口注冊處理器之前，我們在window對象上調用了addEventListener。 這種方法也可以在 DOM 元素和一些其他類型的對象上找到。 僅當事件發生在其注冊對象的上下文中時，才調用事件監聽器。

Click me
No handler here.

示例代碼中將處理器附加到按鈕節點上。因此，點擊按鈕時會觸發并執行處理器，而點擊文檔的其他部分則沒有反應。

向節點提供onclick屬性也有類似效果。這適用于大多數類型的事件 - 您可以為屬性附加處理器，屬性名稱為前面帶有on的事件名稱。

但是一個節點只能有一個onclick屬性，所以你只能用這種方式為每個節點注冊一個處理器。 addEventListener方法允許您添加任意數量的處理器，因此即使元素上已經存在另一個處理器，添加處理器也是安全的。

removeEventListener方法將刪除一個處理器，使用類似于addEventListener的參數調用。

Act-once button

賦予removeEventListener的函數必須是賦予addEventListener的完全相同的函數值。 因此，要注銷一個處理其，您需要為該函數提供一個名稱（在本例中為once），以便能夠將相同的函數值傳遞給這兩個方法。

雖然目前為止我們忽略了它，事件處理器函數作為對象傳遞：事件（Event）對象。這個對象持有事件的額外信息。例如，如果我們想知道哪個鼠標按鍵被按下，我們可以查看事件對象的which屬性。

Click me any way you want

存儲在各種類型事件對象中的信息是有差別的。隨后本章將會討論許多類型的事件。對象的type屬性一般持有一個字符串，表示事件（例如"click"和"mousedown"）。

對于大多數事件類型，在具有子節點的節點上注冊的處理器，也將接收發生在子節點中的事件。若點擊一個段落中的按鈕，段落的事件處理器也會收到點擊事件。

但若段落和按鈕都有事件處理器，則先執行最特殊的事件處理器（按鈕的事件處理器）。也就是說事件向外傳播，從觸發事件的節點到其父節點，最后直到文檔根節點。最后，當某個特定節點上注冊的所有事件處理器按其順序全部執行完畢后，窗口對象的事件處理器才有機會響應事件。

事件處理器任何時候都可以調用事件對象的stopPropagation方法，阻止事件進一步傳播。該方法有時很實用，例如，你將一個按鈕放在另一個可點擊元素中，但你不希望點擊該按鈕會激活外部元素的點擊行為。

下面的示例代碼將mousedown處理器注冊到按鈕和其外部的段落節點上。在按鈕上點擊鼠標右鍵，按鈕的處理器會調用stopPropagation，調度段落上的事件處理器執行。當點擊鼠標其他鍵時，兩個處理器都會執行。

A paragraph with a button.

大多數事件對象都有target屬性，指的是事件來源節點。你可以根據該屬性防止無意中處理了傳播自其他節點的事件。

我們也可以使用target屬性來創建出特定類型事件的處理網絡。例如，如果一個節點中包含了很長的按鈕列表，比較方便的處理方式是在外部節點上注冊一個點擊事件處理器，并根據事件的target屬性來區分用戶按下了哪個按鈕，而不是為每個按鈕都注冊獨立的事件處理器。

A
B
C

大多數事件都有與其關聯的默認動作。若點擊鏈接，就會跳轉到鏈接目標。若點擊向下的箭頭，瀏覽器會向下翻頁。若右擊鼠標，可以得到一個上下文菜單等。

對于大多數類型的事件，JavaScript 事件處理器會在默認行為發生之前調用。若事件處理器不希望執行默認行為（通常是因為已經處理了該事件），會調用preventDefault事件對象的方法。

你可以實現你自己的鍵盤快捷鍵或交互式菜單。你也可以干擾用戶期望的行為。例如，這里實現一個無法跳轉的鏈接。

MDN

除非你有非常充足的理由，否則不要這樣做。當預期的行為被打破時，使用你的頁面的人會感到不快。

在有些瀏覽器中，你完全無法攔截某些事件。比如在 Chrome 中，關閉鍵盤快捷鍵（CTRL-W或COMMAND-W）無法由 JavaScript 處理。

當按下鍵盤上的按鍵時，瀏覽器會觸發"keydown"事件。當松開按鍵時，會觸發"keyup"事件。

This page turns violet when you hold the V key.

盡管從keydown這個事件名上看應該是物理按鍵按下時觸發，但當持續按下某個按鍵時，會循環觸發該事件。有時，你想謹慎對待它。例如，如果您在按下某個按鍵時向 DOM 添加按鈕，并且在釋放按鍵時再次將其刪除，則可能會在按住某個按鍵的時間過長時，意外添加數百個按鈕。

該示例查看了事件對象的key屬性，來查看事件關于哪個鍵。 該屬性包含一個字符串，對于大多數鍵，它對應于按下該鍵時將鍵入的內容。 對于像Enter這樣的特殊鍵，它包含一個用于命名鍵的字符串（在本例中為"Enter"）。 如果你按住一個鍵的同時按住Shift鍵，這也可能影響鍵的名稱 - "v"變為"V"，"1"可能變成"!"，這是按下Shift-1鍵 在鍵盤上產生的東西。

諸如shift、ctrl、alt和meta（Mac 上的command）之類的修飾按鍵會像普通按鍵一樣產生事件。但在查找組合鍵時，你也可以查看鍵盤和鼠標事件的shiftKey、ctrlKey、altKey和metaKey屬性來判斷這些鍵是否被按下。

Press Ctrl-Space to continue.

按鍵事件發生的 DOM 節點取決于按下按鍵時具有焦點的元素。 大多數節點不能擁有焦點，除非你給他們一個tabindex屬性，但像鏈接，按鈕和表單字段可以。 我們將在第 18 章中回顧表單字段。 當沒有特別的焦點時，document.body充當按鍵事件的目標節點。

當用戶鍵入文本時，使用按鍵事件來確定正在鍵入的內容是有問題的。 某些平臺，尤其是 Android 手機上的虛擬鍵盤，不會觸發按鍵事件。 但即使你有一個老式鍵盤，某些類型的文本輸入也不能直接匹配按鍵，例如其腳本不適合鍵盤的人所使用的 IME（“輸入法編輯器”）軟件 ，其中組合多個熱鍵來創建字符。

要注意什么時候輸入了內容，每當用戶更改其內容時，可以鍵入的元素（例如和</b>標簽）觸發<b>"input"</b>事件。為了獲得輸入的實際內容，最好直接從焦點字段中讀取它。 第 18 章將展示如何實現。</p> <b>指針事件</b> <p>目前有兩種廣泛使用的方式，用于指向屏幕上的東西：鼠標（包括類似鼠標的設備，如觸摸板和軌跡球）和觸摸屏。 它們產生不同類型的事件。</p> <b>鼠標點擊</b> <p>點擊鼠標按鍵會觸發一系列事件。<b>"mousedown"</b>事件和<b>"mouseup"</b>事件類似于<b>"keydown"</b>和<b>"keyup"</b>事件，當鼠標按鈕按下或釋放時觸發。當事件發生時，由鼠標指針下方的 DOM 節點觸發事件。</p> <p>在<b>mouseup</b>事件后，包含鼠標按下與釋放的特定節點會觸發<b>"click"</b>事件。例如，如果我在一個段落上按下鼠標，移動到另一個段落上釋放鼠標，<b>"click"</b>事件會發生在包含這兩個段落的元素上。</p> <p>若兩次點擊事件觸發時機接近，則在第二次點擊事件之后，也會觸發<b>"dbclick"</b>（雙擊，double-click）事件。</p> <p>為了獲得鼠標事件觸發的精確信息，你可以查看事件中的<b>clientX</b>和<b>clientY</b>屬性，包含了事件相對于窗口左上角的坐標（以像素為單位）。或<b>pageX</b>和<b>pageY</b>，它們相對于整個文檔的左上角（當窗口被滾動時可能不同）。</p> <p>下面的代碼實現了簡單的繪圖程序。每次點擊文檔時，會在鼠標指針下添加一個點。還有一個稍微優化的繪圖程序，請參見第 19 章。</p> <pre><style> body { height: 200px; background: beige; } .dot { height: 8px; width: 8px; border-radius: 4px; /* rounds corners */ background: blue; position: absolute; } </style> <script> window.addEventListener("click", event => { let dot = document.createElement("div"); dot.className = "dot"; dot.style.left = (event.pageX - 4) + "px"; dot.style.top = (event.pageY - 4) + "px"; document.body.appendChild(dot); }); </script></pre> <b>鼠標移動</b> <p>每次鼠標移動時都會觸發<b>"mousemove"</b>事件。該事件可用于跟蹤鼠標位置。當實現某些形式的鼠標拖拽功能時，該事件非常有用。</p> <p>舉一個例子，下面的程序展示一條欄，并設置一個事件處理器，當向左拖動這個欄時，會使其變窄，若向右拖動則變寬。</p> <pre><p>Drag the bar to change its width:</p> <div style="background: orange; width: 60px; height: 20px"> </div> <script> let lastX; // Tracks the last observed mouse X position let bar = document.querySelector("div"); bar.addEventListener("mousedown", event => { if (event.button == 0) { lastX = event.clientX; window.addEventListener("mousemove", moved); event.preventDefault(); // Prevent selection } }); function moved(event) { if (event.buttons == 0) { window.removeEventListener("mousemove", moved); } else { let dist = event.clientX - lastX; let newWidth = Math.max(10, bar.offsetWidth + dist); bar.style.width = newWidth + "px"; lastX = event.clientX; } } </script></pre> <p>請注意，<b>mousemove</b>處理器注冊在窗口對象上。即使鼠標在改變窗口尺寸時在欄外側移動，只要按住按鈕，我們仍然想要更新其大小。</p> <p>釋放鼠標按鍵時，我們必須停止調整欄的大小。 為此，我們可以使用<b>buttons</b>屬性（注意復數形式），它告訴我們當前按下的按鍵。 當它為零時，沒有按下按鍵。 當按鍵被按住時，其值是這些按鍵的代碼總和 - 左鍵代碼為 1，右鍵為 2，中鍵為 4。 這樣，您可以通過獲取<b>buttons</b>的剩余值及其代碼，來檢查是否按下了給定按鍵。</p> <p>請注意，這些代碼的順序與<b>button</b>使用的順序不同，中鍵位于右鍵之前。 如前所述，一致性并不是瀏覽器編程接口的強項。</p> <b>觸摸事件</b> <p>我們使用的圖形瀏覽器的風格，是考慮到鼠標界面的情況下而設計的，那個時候觸摸屏非常罕見。 為了使網絡在早期的觸摸屏手機上“工作”，在某種程度上，這些設備的瀏覽器假裝觸摸事件是鼠標事件。 如果你點擊你的屏幕，你會得到<b>"mousedown"</b>，<b>"mouseup"</b>和<b>"click"</b>事件。</p> <p>但是這種錯覺不是很健壯。 觸摸屏與鼠標的工作方式不同：它沒有多個按鈕，當手指不在屏幕上時不能跟蹤手指（來模擬<b>"mousemove"</b>），并且允許多個手指同時在屏幕上。</p> <p>鼠標事件只涵蓋了簡單情況下的觸摸交互 - 如果您為按鈕添加<b>"click"</b>處理器，觸摸用戶仍然可以使用它。 但是像上一個示例中的可調整大小的欄在觸摸屏上不起作用。</p> <p>觸摸交互觸發了特定的事件類型。 當手指開始觸摸屏幕時，您會看到<b>"touchstart"</b>事件。 當它在觸摸中移動時，觸發<b>"touchmove"</b>事件。 最后，當它停止觸摸屏幕時，您會看到<b>"touchend"</b>事件。</p> <p>由于許多觸摸屏可以同時檢測多個手指，這些事件沒有與其關聯的一組坐標。 相反，它們的事件對象擁有<b>touches</b>屬性，它擁有一個類數組對象，每個對象都有自己的<b>clientX</b>，<b>clientY</b>，<b>pageX</b>和<b>pageY</b>屬性。</p> <p>你可以這樣，在每個觸摸手指周圍顯示紅色圓圈。</p> <pre><style> dot { position: absolute; display: block; border: 2px solid red; border-radius: 50px; height: 100px; width: 100px; } </style> <p>Touch this page</p> <script> function update(event) { for (let dot; dot = document.querySelector("dot");) { dot.remove(); } for (let i = 0; i < event.touches.length; i++) { let {pageX, pageY} = event.touches[i]; let dot = document.createElement("dot"); dot.style.left = (pageX - 50) + "px"; dot.style.top = (pageY - 50) + "px"; document.body.appendChild(dot); } } window.addEventListener("touchstart", update); window.addEventListener("touchmove", update); window.addEventListener("touchend", update); </script></pre> <p>您經常希望在觸摸事件處理器中調用<b>preventDefault</b>，來覆蓋瀏覽器的默認行為（可能包括在滑動時滾動頁面），并防止觸發鼠標事件，您也可能擁有它的處理器。</p> <b>滾動事件</b> <p>每當元素滾動時，會觸發<b>scroll</b>事件。該事件用處極多，比如知道用戶當前查看的元素（禁用用戶視線以外的動畫，或向邪惡的指揮部發送監視報告），或展示一些滾動的跡象（通過高亮表格的部分內容，或顯示頁碼）。</p> <p>以下示例在文檔上方繪制一個進度條，并在您向下滾動時更新它來填充：</p> <pre><style> #progress { border-bottom: 2px solid blue; width: 0; position: fixed; top: 0; left: 0; } </style> <div class="t5d5fzh" id="progress"></div> <script> // Create some content document.body.appendChild(document.createTextNode( "supercalifragilisticexpialidocious ".repeat(1000))); let bar = document.querySelector("#progress"); window.addEventListener("scroll", () => { let max = document.body.scrollHeight - innerHeight; bar.style.width = `${(pageYOffset / max) * 100}%`; }); </script></pre> <p>將元素的<b>position</b>屬性指定為<b>fixed</b>時，其行為和<b>absolute</b>很像，但可以防止在文檔滾動時期跟著文檔一起滾動。其效果是讓我們的進度條呆在最頂上。 改變其寬度來指示當前進度。 在設置寬度時，我們使用<b>%</b>而不是<b>px</b>作為單位，使元素的大小相對于頁面寬度。</p> <p><b>innerHeight</b>全局綁定是窗口高度，我們必須要減去滾動條的高度。你點擊文檔底部的時候是無法繼續滾動的。對于窗口高度來說，也存在<b>innerWidth</b>。使用<b>pageYOffset</b>（當前滾動位置）除以最大滾動位置，并乘以 100，就可以得到進度條長度。</p> <p>調用滾動事件的<b>preventDefault</b>無法阻止滾動。實際上，事件處理器是在進行滾動之后才觸發的。</p> <b>焦點事件</b> <p>當元素獲得焦點時，瀏覽器會觸發其上的<b>focus</b>事件。當失去焦點時，元素會獲得<b>blur</b>事件。</p> <p>與前文討論的事件不同，這兩個事件不會傳播。子元素獲得或失去焦點時，不會激活父元素的處理器。</p> <p>下面的示例中，文本域在擁有焦點時會顯示幫助文本。</p> <pre><p>Name: <input type="text" data-help="Your full name"></p> <p>Age: <input type="text" data-help="Your age in years"></p> <p id="help"></p> <script> let help = document.querySelector("#help"); let fields = document.querySelectorAll("input"); for (let field of Array.from(fields)) { field.addEventListener("focus", event => { let text = event.target.getAttribute("data-help"); help.textContent = text; }); field.addEventListener("blur", event => { help.textContent = ""; }); } </script></pre> <p>當用戶從瀏覽器標簽或窗口移開時，窗口對象會收到<b>focus</b>事件，當移動到標簽或窗口上時，則收到<b>blur</b>事件。</p> <b>加載事件</b> <p>當界面結束裝載時，會觸發窗口對象和文檔<b>body</b>對象的<b>"load"</b>事件。該事件通常用于在當整個文檔構建完成時，進行初始化。請記住<b><script>標</b>簽的內容是一遇到就執行的。這可能太早了，比如有時腳本需要處理在<b><script></b>標簽后出現的內容。</p> <p>諸如<b>image</b>或<b>script</b>這類會裝載外部文件的標簽都有<b>load</b>事件，指示其引用文件裝載完畢。類似于焦點事件，裝載事件是不會傳播的。</p> <p>當頁面關閉或跳轉（比如跳轉到一個鏈接）時，會觸發<b>beforeunload</b>事件。該事件用于防止用戶突然關閉文檔而丟失工作結果。你無法使用<b>preventDefault</b>方法阻止頁面卸載。它通過從處理器返回非空值來完成。當你這樣做時，瀏覽器會通過顯示一個對話框，詢問用戶是否關閉頁面的對話框中。該機制確保用戶可以離開，即使在那些想要留住用戶，強制用戶看廣告的惡意頁面上，也是這樣。</p> <b>事件和事件循環</b> <p>在事件循環的上下文中，如第 11 章中所述，瀏覽器事件處理器的行為，類似于其他異步通知。 它們是在事件發生時調度的，但在它們有機會運行之前，必須等待其他正在運行的腳本完成。</p> <p>僅當沒有別的事情正在運行時，才能處理事件，這個事實意味著，如果事件循環與其他工作捆綁在一起，任何頁面交互（通過事件發生）都將延遲，直到有時間處理它為止。 因此，如果您安排了太多工作，無論是長時間運行的事件處理器還是大量短時間運行的工作，該頁面都會變得緩慢且麻煩。</p> <p>如果您想在背后做一些耗時的事情而不會凍結頁面，瀏覽器會提供一些名為 Web Worker 的東西。 Web Worker 是一個 JavaScript 過程，與主腳本一起在自己的時間線上運行。</p> <p>想象一下，計算一個數字的平方運算是一個重量級的，長期運行的計算，我們希望在一個多帶帶的線程中執行。 我們可以編寫一個名為<b>code/squareworker.js</b>的文件，通過計算平方并發回消息來響應消息：</p> <pre>addEventListener("message", event => { postMessage(event.data * event.data); });</pre> <p>為了避免多線程觸及相同數據的問題，Web Worker 不會將其全局作用域或任何其他數據與主腳本的環境共享。 相反，你必須通過來回發送消息與他們溝通。</p> <p>此代碼會生成一個運行該腳本的 Web Worker，向其發送幾條消息并輸出響應。</p> <pre>let squareWorker = new Worker("code/squareworker.js"); squareWorker.addEventListener("message", event => { console.log("The worker responded:", event.data); }); squareWorker.postMessage(10); squareWorker.postMessage(24);</pre> <p>函數<b>postMessage</b>會發送一條消息，觸發接收方的<b>message</b>事件。創建工作單元的腳本通過<b>Worker</b>對象收發消息，而<b>worker</b>則直接向其全局作用域發送消息，或監聽其消息。只有可以表示為 JSON 的值可以作為消息發送 - 另一方將接收它們的副本，而不是值本身。</p> <b>定時器</b> <p>我們在第 11 章中看到了<b>setTimeout</b>函數。 它會在給定的毫秒數之后，調度另一個函數在稍后調用。</p> <p>有時讀者需要取消調度的函數。可以存儲<b>setTimeout</b>的返回值，并將作為參數調用<b>clearTimeout</b>。</p> <pre>let bombTimer = setTimeout(() => { console.log("BOOM!"); }, 500); if (Math.random() < 0.5) { // 50% chance console.log("Defused."); clearTimeout(bombTimer); }</pre> <p>函數<b>cancelAnimationFrame</b>作用與<b>clearTimeout</b>相同，使用<b>requestAnimationFrame</b>的返回值調用該函數，可以取消幀（假定函數還沒有被調用）。</p> <p>還有<b>setInterval</b>和<b>clearInterval</b>這種相似的函數，用于設置計時器，每隔一定毫秒數重復執行一次。</p> <pre>let ticks = 0; let clock = setInterval(() => { console.log("tick", ticks++); if (ticks == 10) { clearInterval(clock); console.log("stop."); } }, 200);</pre> <b>降頻</b> <p>某些類型的事件可能會連續、迅速觸發多次（例如<b>mousemove</b>和<b>scroll</b>事件）。處理這類事件時，你必須小心謹慎，防止處理任務耗時過長，否則處理器會占據過多事件，導致用戶與文檔交互變得非常慢。</p> <p>若你需要在這類處理器中編寫一些重要任務，可以使用<b>setTimeout</b>來確保不會頻繁進行這些任務。我們通常稱之為“事件降頻（Debounce）”。有許多方法可以完成該任務。</p> <p>在第一個示例中，當用戶輸入某些字符時，我們想要有所反應，但我們不想在每個按鍵事件中立即處理該任務。當用戶輸入過快時，我們希望暫停一下然后進行處理。我們不是立即在事件處理器中執行動作，而是設置一個定時器。我們也會清除上一次的定時器（如果有），因此當兩個事件觸發間隔過短（比定時器延時短），就會取消上一次事件設置的定時器。</p> <pre><textarea>Type something here...

將undefined傳遞給clearTimeout或在一個已結束的定時器上調用clearTimeout是沒有效果的。因此，我們不需要關心何時調用該方法，只需要每個事件中都這樣做即可。

💥