摘要：事件與節(jié)點(diǎn)每個(gè)瀏覽器事件處理器被注冊(cè)在上下文中。事件對(duì)象雖然目前為止我們忽略了它，事件處理器函數(shù)作為對(duì)象傳遞事件對(duì)象。若事件處理器不希望執(zhí)行默認(rèn)行為通常是因?yàn)橐呀?jīng)處理了該事件，會(huì)調(diào)用事件對(duì)象的方法。

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

有些程序處理用戶的直接輸入，比如鼠標(biāo)和鍵盤動(dòng)作。這種輸入方式不是組織整齊的數(shù)據(jù)結(jié)構(gòu) - 它是一次一個(gè)地，實(shí)時(shí)地出現(xiàn)的，并且期望程序在發(fā)生時(shí)作出響應(yīng)。

想象一下，有一個(gè)接口，若想知道鍵盤上是否有一個(gè)鍵是否被按下，唯一的方法是讀取那個(gè)按鍵的當(dāng)前狀態(tài)。為了能夠響應(yīng)按鍵動(dòng)作，你需要不斷讀取鍵盤狀態(tài)，以在按鍵被釋放之前捕捉到按下狀態(tài)。這種方法在執(zhí)行時(shí)間密集計(jì)算時(shí)非常危險(xiǎn)，因?yàn)槟憧赡苠e(cuò)過按鍵事件。

一些原始機(jī)器可以像那樣處理輸入。有一種更進(jìn)一步的方法，硬件或操作系統(tǒng)發(fā)現(xiàn)按鍵時(shí)間并將其放入隊(duì)列中。程序可以周期性地檢查隊(duì)列，等待新事件并在發(fā)現(xiàn)事件時(shí)進(jìn)行響應(yīng)。

當(dāng)然，程序必須記得監(jiān)視隊(duì)列，并經(jīng)常做這種事，因?yàn)槿魏螘r(shí)候，按鍵被按下和程序發(fā)現(xiàn)事件之間都會(huì)使得軟件反應(yīng)遲鈍。該方法被稱為輪詢。大多數(shù)程序員更希望避免這種方法。

一個(gè)更好的機(jī)制是，系統(tǒng)在發(fā)生事件時(shí)主動(dòng)通知我們的代碼。瀏覽器實(shí)現(xiàn)了這種特性，支持我們將函數(shù)注冊(cè)為特定事件的處理器。

Click this document to activate the handler.

window綁定指向?yàn)g覽器提供的內(nèi)置對(duì)象。 它代表包含文檔的瀏覽器窗口。 調(diào)用它的addEventListener方法注冊(cè)第二個(gè)參數(shù)，以便在第一個(gè)參數(shù)描述的事件發(fā)生時(shí)調(diào)用它。

每個(gè)瀏覽器事件處理器被注冊(cè)在上下文中。在為整個(gè)窗口注冊(cè)處理器之前，我們?cè)?b>window對(duì)象上調(diào)用了addEventListener。 這種方法也可以在 DOM 元素和一些其他類型的對(duì)象上找到。 僅當(dāng)事件發(fā)生在其注冊(cè)對(duì)象的上下文中時(shí)，才調(diào)用事件監(jiān)聽器。

Click me
No handler here.

示例代碼中將處理器附加到按鈕節(jié)點(diǎn)上。因此，點(diǎn)擊按鈕時(shí)會(huì)觸發(fā)并執(zhí)行處理器，而點(diǎn)擊文檔的其他部分則沒有反應(yīng)。

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

但是一個(gè)節(jié)點(diǎn)只能有一個(gè)onclick屬性，所以你只能用這種方式為每個(gè)節(jié)點(diǎn)注冊(cè)一個(gè)處理器。 addEventListener方法允許您添加任意數(shù)量的處理器，因此即使元素上已經(jīng)存在另一個(gè)處理器，添加處理器也是安全的。

removeEventListener方法將刪除一個(gè)處理器，使用類似于addEventListener的參數(shù)調(diào)用。

Act-once button

賦予removeEventListener的函數(shù)必須是賦予addEventListener的完全相同的函數(shù)值。 因此，要注銷一個(gè)處理其，您需要為該函數(shù)提供一個(gè)名稱（在本例中為once），以便能夠?qū)⑾嗤暮瘮?shù)值傳遞給這兩個(gè)方法。

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

Click me any way you want

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

對(duì)于大多數(shù)事件類型，在具有子節(jié)點(diǎn)的節(jié)點(diǎn)上注冊(cè)的處理器，也將接收發(fā)生在子節(jié)點(diǎn)中的事件。若點(diǎn)擊一個(gè)段落中的按鈕，段落的事件處理器也會(huì)收到點(diǎn)擊事件。

但若段落和按鈕都有事件處理器，則先執(zhí)行最特殊的事件處理器（按鈕的事件處理器）。也就是說事件向外傳播，從觸發(fā)事件的節(jié)點(diǎn)到其父節(jié)點(diǎn)，最后直到文檔根節(jié)點(diǎn)。最后，當(dāng)某個(gè)特定節(jié)點(diǎn)上注冊(cè)的所有事件處理器按其順序全部執(zhí)行完畢后，窗口對(duì)象的事件處理器才有機(jī)會(huì)響應(yīng)事件。

事件處理器任何時(shí)候都可以調(diào)用事件對(duì)象的stopPropagation方法，阻止事件進(jìn)一步傳播。該方法有時(shí)很實(shí)用，例如，你將一個(gè)按鈕放在另一個(gè)可點(diǎn)擊元素中，但你不希望點(diǎn)擊該按鈕會(huì)激活外部元素的點(diǎn)擊行為。

下面的示例代碼將mousedown處理器注冊(cè)到按鈕和其外部的段落節(jié)點(diǎn)上。在按鈕上點(diǎn)擊鼠標(biāo)右鍵，按鈕的處理器會(huì)調(diào)用stopPropagation，調(diào)度段落上的事件處理器執(zhí)行。當(dāng)點(diǎn)擊鼠標(biāo)其他鍵時(shí)，兩個(gè)處理器都會(huì)執(zhí)行。

A paragraph with a button.

大多數(shù)事件對(duì)象都有target屬性，指的是事件來源節(jié)點(diǎn)。你可以根據(jù)該屬性防止無意中處理了傳播自其他節(jié)點(diǎn)的事件。

我們也可以使用target屬性來創(chuàng)建出特定類型事件的處理網(wǎng)絡(luò)。例如，如果一個(gè)節(jié)點(diǎn)中包含了很長的按鈕列表，比較方便的處理方式是在外部節(jié)點(diǎn)上注冊(cè)一個(gè)點(diǎn)擊事件處理器，并根據(jù)事件的target屬性來區(qū)分用戶按下了哪個(gè)按鈕，而不是為每個(gè)按鈕都注冊(cè)獨(dú)立的事件處理器。

A
B
C

大多數(shù)事件都有與其關(guān)聯(lián)的默認(rèn)動(dòng)作。若點(diǎn)擊鏈接，就會(huì)跳轉(zhuǎn)到鏈接目標(biāo)。若點(diǎn)擊向下的箭頭，瀏覽器會(huì)向下翻頁。若右擊鼠標(biāo)，可以得到一個(gè)上下文菜單等。

對(duì)于大多數(shù)類型的事件，JavaScript 事件處理器會(huì)在默認(rèn)行為發(fā)生之前調(diào)用。若事件處理器不希望執(zhí)行默認(rèn)行為（通常是因?yàn)橐呀?jīng)處理了該事件），會(huì)調(diào)用preventDefault事件對(duì)象的方法。

你可以實(shí)現(xiàn)你自己的鍵盤快捷鍵或交互式菜單。你也可以干擾用戶期望的行為。例如，這里實(shí)現(xiàn)一個(gè)無法跳轉(zhuǎn)的鏈接。

MDN

除非你有非常充足的理由，否則不要這樣做。當(dāng)預(yù)期的行為被打破時(shí)，使用你的頁面的人會(huì)感到不快。

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

當(dāng)按下鍵盤上的按鍵時(shí)，瀏覽器會(huì)觸發(fā)"keydown"事件。當(dāng)松開按鍵時(shí)，會(huì)觸發(fā)"keyup"事件。

This page turns violet when you hold the V key.

盡管從keydown這個(gè)事件名上看應(yīng)該是物理按鍵按下時(shí)觸發(fā)，但當(dāng)持續(xù)按下某個(gè)按鍵時(shí)，會(huì)循環(huán)觸發(fā)該事件。有時(shí)，你想謹(jǐn)慎對(duì)待它。例如，如果您在按下某個(gè)按鍵時(shí)向 DOM 添加按鈕，并且在釋放按鍵時(shí)再次將其刪除，則可能會(huì)在按住某個(gè)按鍵的時(shí)間過長時(shí)，意外添加數(shù)百個(gè)按鈕。

該示例查看了事件對(duì)象的key屬性，來查看事件關(guān)于哪個(gè)鍵。 該屬性包含一個(gè)字符串，對(duì)于大多數(shù)鍵，它對(duì)應(yīng)于按下該鍵時(shí)將鍵入的內(nèi)容。 對(duì)于像Enter這樣的特殊鍵，它包含一個(gè)用于命名鍵的字符串（在本例中為"Enter"）。 如果你按住一個(gè)鍵的同時(shí)按住Shift鍵，這也可能影響鍵的名稱 - "v"變?yōu)?b>"V"，"1"可能變成"!"，這是按下Shift-1鍵 在鍵盤上產(chǎn)生的東西。

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

Press Ctrl-Space to continue.

按鍵事件發(fā)生的 DOM 節(jié)點(diǎn)取決于按下按鍵時(shí)具有焦點(diǎn)的元素。 大多數(shù)節(jié)點(diǎn)不能擁有焦點(diǎn)，除非你給他們一個(gè)tabindex屬性，但像鏈接，按鈕和表單字段可以。 我們將在第 18 章中回顧表單字段。 當(dāng)沒有特別的焦點(diǎn)時(shí)，document.body充當(dāng)按鍵事件的目標(biāo)節(jié)點(diǎn)。

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

要注意什么時(shí)候輸入了內(nèi)容，每當(dāng)用戶更改其內(nèi)容時(shí)，可以鍵入的元素（例如和</b>標(biāo)簽）觸發(fā)<b>"input"</b>事件。為了獲得輸入的實(shí)際內(nèi)容，最好直接從焦點(diǎn)字段中讀取它。 第 18 章將展示如何實(shí)現(xiàn)。</p> <b>指針事件</b> <p>目前有兩種廣泛使用的方式，用于指向屏幕上的東西：鼠標(biāo)（包括類似鼠標(biāo)的設(shè)備，如觸摸板和軌跡球）和觸摸屏。 它們產(chǎn)生不同類型的事件。</p> <b>鼠標(biāo)點(diǎn)擊</b> <p>點(diǎn)擊鼠標(biāo)按鍵會(huì)觸發(fā)一系列事件。<b>"mousedown"</b>事件和<b>"mouseup"</b>事件類似于<b>"keydown"</b>和<b>"keyup"</b>事件，當(dāng)鼠標(biāo)按鈕按下或釋放時(shí)觸發(fā)。當(dāng)事件發(fā)生時(shí)，由鼠標(biāo)指針下方的 DOM 節(jié)點(diǎn)觸發(fā)事件。</p> <p>在<b>mouseup</b>事件后，包含鼠標(biāo)按下與釋放的特定節(jié)點(diǎn)會(huì)觸發(fā)<b>"click"</b>事件。例如，如果我在一個(gè)段落上按下鼠標(biāo)，移動(dòng)到另一個(gè)段落上釋放鼠標(biāo)，<b>"click"</b>事件會(huì)發(fā)生在包含這兩個(gè)段落的元素上。</p> <p>若兩次點(diǎn)擊事件觸發(fā)時(shí)機(jī)接近，則在第二次點(diǎn)擊事件之后，也會(huì)觸發(fā)<b>"dbclick"</b>（雙擊，double-click）事件。</p> <p>為了獲得鼠標(biāo)事件觸發(fā)的精確信息，你可以查看事件中的<b>clientX</b>和<b>clientY</b>屬性，包含了事件相對(duì)于窗口左上角的坐標(biāo)（以像素為單位）。或<b>pageX</b>和<b>pageY</b>，它們相對(duì)于整個(gè)文檔的左上角（當(dāng)窗口被滾動(dòng)時(shí)可能不同）。</p> <p>下面的代碼實(shí)現(xiàn)了簡單的繪圖程序。每次點(diǎn)擊文檔時(shí)，會(huì)在鼠標(biāo)指針下添加一個(gè)點(diǎn)。還有一個(gè)稍微優(yōu)化的繪圖程序，請(qǐng)參見第 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>鼠標(biāo)移動(dòng)</b> <p>每次鼠標(biāo)移動(dòng)時(shí)都會(huì)觸發(fā)<b>"mousemove"</b>事件。該事件可用于跟蹤鼠標(biāo)位置。當(dāng)實(shí)現(xiàn)某些形式的鼠標(biāo)拖拽功能時(shí)，該事件非常有用。</p> <p>舉一個(gè)例子，下面的程序展示一條欄，并設(shè)置一個(gè)事件處理器，當(dāng)向左拖動(dòng)這個(gè)欄時(shí)，會(huì)使其變窄，若向右拖動(dòng)則變寬。</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>請(qǐng)注意，<b>mousemove</b>處理器注冊(cè)在窗口對(duì)象上。即使鼠標(biāo)在改變窗口尺寸時(shí)在欄外側(cè)移動(dòng)，只要按住按鈕，我們?nèi)匀幌胍缕浯笮　?/p> <p>釋放鼠標(biāo)按鍵時(shí)，我們必須停止調(diào)整欄的大小。 為此，我們可以使用<b>buttons</b>屬性（注意復(fù)數(shù)形式），它告訴我們當(dāng)前按下的按鍵。 當(dāng)它為零時(shí)，沒有按下按鍵。 當(dāng)按鍵被按住時(shí)，其值是這些按鍵的代碼總和 - 左鍵代碼為 1，右鍵為 2，中鍵為 4。 這樣，您可以通過獲取<b>buttons</b>的剩余值及其代碼，來檢查是否按下了給定按鍵。</p> <p>請(qǐng)注意，這些代碼的順序與<b>button</b>使用的順序不同，中鍵位于右鍵之前。 如前所述，一致性并不是瀏覽器編程接口的強(qiáng)項(xiàng)。</p> <b>觸摸事件</b> <p>我們使用的圖形瀏覽器的風(fēng)格，是考慮到鼠標(biāo)界面的情況下而設(shè)計(jì)的，那個(gè)時(shí)候觸摸屏非常罕見。 為了使網(wǎng)絡(luò)在早期的觸摸屏手機(jī)上“工作”，在某種程度上，這些設(shè)備的瀏覽器假裝觸摸事件是鼠標(biāo)事件。 如果你點(diǎn)擊你的屏幕，你會(huì)得到<b>"mousedown"</b>，<b>"mouseup"</b>和<b>"click"</b>事件。</p> <p>但是這種錯(cuò)覺不是很健壯。 觸摸屏與鼠標(biāo)的工作方式不同：它沒有多個(gè)按鈕，當(dāng)手指不在屏幕上時(shí)不能跟蹤手指（來模擬<b>"mousemove"</b>），并且允許多個(gè)手指同時(shí)在屏幕上。</p> <p>鼠標(biāo)事件只涵蓋了簡單情況下的觸摸交互 - 如果您為按鈕添加<b>"click"</b>處理器，觸摸用戶仍然可以使用它。 但是像上一個(gè)示例中的可調(diào)整大小的欄在觸摸屏上不起作用。</p> <p>觸摸交互觸發(fā)了特定的事件類型。 當(dāng)手指開始觸摸屏幕時(shí)，您會(huì)看到<b>"touchstart"</b>事件。 當(dāng)它在觸摸中移動(dòng)時(shí)，觸發(fā)<b>"touchmove"</b>事件。 最后，當(dāng)它停止觸摸屏幕時(shí)，您會(huì)看到<b>"touchend"</b>事件。</p> <p>由于許多觸摸屏可以同時(shí)檢測(cè)多個(gè)手指，這些事件沒有與其關(guān)聯(lián)的一組坐標(biāo)。 相反，它們的事件對(duì)象擁有<b>touches</b>屬性，它擁有一個(gè)類數(shù)組對(duì)象，每個(gè)對(duì)象都有自己的<b>clientX</b>，<b>clientY</b>，<b>pageX</b>和<b>pageY</b>屬性。</p> <p>你可以這樣，在每個(gè)觸摸手指周圍顯示紅色圓圈。</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>您經(jīng)常希望在觸摸事件處理器中調(diào)用<b>preventDefault</b>，來覆蓋瀏覽器的默認(rèn)行為（可能包括在滑動(dòng)時(shí)滾動(dòng)頁面），并防止觸發(fā)鼠標(biāo)事件，您也可能擁有它的處理器。</p> <b>滾動(dòng)事件</b> <p>每當(dāng)元素滾動(dòng)時(shí)，會(huì)觸發(fā)<b>scroll</b>事件。該事件用處極多，比如知道用戶當(dāng)前查看的元素（禁用用戶視線以外的動(dòng)畫，或向邪惡的指揮部發(fā)送監(jiān)視報(bào)告），或展示一些滾動(dòng)的跡象（通過高亮表格的部分內(nèi)容，或顯示頁碼）。</p> <p>以下示例在文檔上方繪制一個(gè)進(jìn)度條，并在您向下滾動(dòng)時(shí)更新它來填充：</p> <pre><style> #progress { border-bottom: 2px solid blue; width: 0; position: fixed; top: 0; left: 0; } </style> <div class="dnkpnhlp" 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>時(shí)，其行為和<b>absolute</b>很像，但可以防止在文檔滾動(dòng)時(shí)期跟著文檔一起滾動(dòng)。其效果是讓我們的進(jìn)度條呆在最頂上。 改變其寬度來指示當(dāng)前進(jìn)度。 在設(shè)置寬度時(shí)，我們使用<b>%</b>而不是<b>px</b>作為單位，使元素的大小相對(duì)于頁面寬度。</p> <p><b>innerHeight</b>全局綁定是窗口高度，我們必須要減去滾動(dòng)條的高度。你點(diǎn)擊文檔底部的時(shí)候是無法繼續(xù)滾動(dòng)的。對(duì)于窗口高度來說，也存在<b>innerWidth</b>。使用<b>pageYOffset</b>（當(dāng)前滾動(dòng)位置）除以最大滾動(dòng)位置，并乘以 100，就可以得到進(jìn)度條長度。</p> <p>調(diào)用滾動(dòng)事件的<b>preventDefault</b>無法阻止?jié)L動(dòng)。實(shí)際上，事件處理器是在進(jìn)行滾動(dòng)之后才觸發(fā)的。</p> <b>焦點(diǎn)事件</b> <p>當(dāng)元素獲得焦點(diǎn)時(shí)，瀏覽器會(huì)觸發(fā)其上的<b>focus</b>事件。當(dāng)失去焦點(diǎn)時(shí)，元素會(huì)獲得<b>blur</b>事件。</p> <p>與前文討論的事件不同，這兩個(gè)事件不會(huì)傳播。子元素獲得或失去焦點(diǎn)時(shí)，不會(huì)激活父元素的處理器。</p> <p>下面的示例中，文本域在擁有焦點(diǎn)時(shí)會(huì)顯示幫助文本。</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>當(dāng)用戶從瀏覽器標(biāo)簽或窗口移開時(shí)，窗口對(duì)象會(huì)收到<b>focus</b>事件，當(dāng)移動(dòng)到標(biāo)簽或窗口上時(shí)，則收到<b>blur</b>事件。</p> <b>加載事件</b> <p>當(dāng)界面結(jié)束裝載時(shí)，會(huì)觸發(fā)窗口對(duì)象和文檔<b>body</b>對(duì)象的<b>"load"</b>事件。該事件通常用于在當(dāng)整個(gè)文檔構(gòu)建完成時(shí)，進(jìn)行初始化。請(qǐng)記住<b><script>標(biāo)</b>簽的內(nèi)容是一遇到就執(zhí)行的。這可能太早了，比如有時(shí)腳本需要處理在<b><script></b>標(biāo)簽后出現(xiàn)的內(nèi)容。</p> <p>諸如<b>image</b>或<b>script</b>這類會(huì)裝載外部文件的標(biāo)簽都有<b>load</b>事件，指示其引用文件裝載完畢。類似于焦點(diǎn)事件，裝載事件是不會(huì)傳播的。</p> <p>當(dāng)頁面關(guān)閉或跳轉(zhuǎn)（比如跳轉(zhuǎn)到一個(gè)鏈接）時(shí)，會(huì)觸發(fā)<b>beforeunload</b>事件。該事件用于防止用戶突然關(guān)閉文檔而丟失工作結(jié)果。你無法使用<b>preventDefault</b>方法阻止頁面卸載。它通過從處理器返回非空值來完成。當(dāng)你這樣做時(shí)，瀏覽器會(huì)通過顯示一個(gè)對(duì)話框，詢問用戶是否關(guān)閉頁面的對(duì)話框中。該機(jī)制確保用戶可以離開，即使在那些想要留住用戶，強(qiáng)制用戶看廣告的惡意頁面上，也是這樣。</p> <b>事件和事件循環(huán)</b> <p>在事件循環(huán)的上下文中，如第 11 章中所述，瀏覽器事件處理器的行為，類似于其他異步通知。 它們是在事件發(fā)生時(shí)調(diào)度的，但在它們有機(jī)會(huì)運(yùn)行之前，必須等待其他正在運(yùn)行的腳本完成。</p> <p>僅當(dāng)沒有別的事情正在運(yùn)行時(shí)，才能處理事件，這個(gè)事實(shí)意味著，如果事件循環(huán)與其他工作捆綁在一起，任何頁面交互（通過事件發(fā)生）都將延遲，直到有時(shí)間處理它為止。 因此，如果您安排了太多工作，無論是長時(shí)間運(yùn)行的事件處理器還是大量短時(shí)間運(yùn)行的工作，該頁面都會(huì)變得緩慢且麻煩。</p> <p>如果您想在背后做一些耗時(shí)的事情而不會(huì)凍結(jié)頁面，瀏覽器會(huì)提供一些名為 Web Worker 的東西。 Web Worker 是一個(gè) JavaScript 過程，與主腳本一起在自己的時(shí)間線上運(yùn)行。</p> <p>想象一下，計(jì)算一個(gè)數(shù)字的平方運(yùn)算是一個(gè)重量級(jí)的，長期運(yùn)行的計(jì)算，我們希望在一個(gè)多帶帶的線程中執(zhí)行。 我們可以編寫一個(gè)名為<b>code/squareworker.js</b>的文件，通過計(jì)算平方并發(fā)回消息來響應(yīng)消息：</p> <pre>addEventListener("message", event => { postMessage(event.data * event.data); });</pre> <p>為了避免多線程觸及相同數(shù)據(jù)的問題，Web Worker 不會(huì)將其全局作用域或任何其他數(shù)據(jù)與主腳本的環(huán)境共享。 相反，你必須通過來回發(fā)送消息與他們溝通。</p> <p>此代碼會(huì)生成一個(gè)運(yùn)行該腳本的 Web Worker，向其發(fā)送幾條消息并輸出響應(yīng)。</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>函數(shù)<b>postMessage</b>會(huì)發(fā)送一條消息，觸發(fā)接收方的<b>message</b>事件。創(chuàng)建工作單元的腳本通過<b>Worker</b>對(duì)象收發(fā)消息，而<b>worker</b>則直接向其全局作用域發(fā)送消息，或監(jiān)聽其消息。只有可以表示為 JSON 的值可以作為消息發(fā)送 - 另一方將接收它們的副本，而不是值本身。</p> <b>定時(shí)器</b> <p>我們?cè)诘?11 章中看到了<b>setTimeout</b>函數(shù)。 它會(huì)在給定的毫秒數(shù)之后，調(diào)度另一個(gè)函數(shù)在稍后調(diào)用。</p> <p>有時(shí)讀者需要取消調(diào)度的函數(shù)?？梢源鎯?chǔ)<b>setTimeout</b>的返回值，并將作為參數(shù)調(diào)用<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>函數(shù)<b>cancelAnimationFrame</b>作用與<b>clearTimeout</b>相同，使用<b>requestAnimationFrame</b>的返回值調(diào)用該函數(shù)，可以取消幀（假定函數(shù)還沒有被調(diào)用）。</p> <p>還有<b>setInterval</b>和<b>clearInterval</b>這種相似的函數(shù)，用于設(shè)置計(jì)時(shí)器，每隔一定毫秒數(shù)重復(fù)執(zhí)行一次。</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>某些類型的事件可能會(huì)連續(xù)、迅速觸發(fā)多次（例如<b>mousemove</b>和<b>scroll</b>事件）。處理這類事件時(shí)，你必須小心謹(jǐn)慎，防止處理任務(wù)耗時(shí)過長，否則處理器會(huì)占據(jù)過多事件，導(dǎo)致用戶與文檔交互變得非常慢。</p> <p>若你需要在這類處理器中編寫一些重要任務(wù)，可以使用<b>setTimeout</b>來確保不會(huì)頻繁進(jìn)行這些任務(wù)。我們通常稱之為“事件降頻（Debounce）”。有許多方法可以完成該任務(wù)。</p> <p>在第一個(gè)示例中，當(dāng)用戶輸入某些字符時(shí)，我們想要有所反應(yīng)，但我們不想在每個(gè)按鍵事件中立即處理該任務(wù)。當(dāng)用戶輸入過快時(shí)，我們希望暫停一下然后進(jìn)行處理。我們不是立即在事件處理器中執(zhí)行動(dòng)作，而是設(shè)置一個(gè)定時(shí)器。我們也會(huì)清除上一次的定時(shí)器（如果有），因此當(dāng)兩個(gè)事件觸發(fā)間隔過短（比定時(shí)器延時(shí)短），就會(huì)取消上一次事件設(shè)置的定時(shí)器。</p> <pre><textarea>Type something here...

將undefined傳遞給clearTimeout或在一個(gè)已結(jié)束的定時(shí)器上調(diào)用clearTimeout是沒有效果的。因此，我們不需要關(guān)心何時(shí)調(diào)用該方法，只需要每個(gè)事件中都這樣做即可。

💥