DOM中事件處理程序的第一個參數？

Cciradih 發布于2019-08-22 18:15 / 3263人閱讀

摘要：上面代碼，使用級的方法為按鈕綁定了一個沒有指定任何參數的事件處理程序，點擊按鈕后，控制臺依次輸出。從結果可以看出，瀏覽器確實將一個事件對象傳入到事件處理程序，即便事件處理程序沒有指定任何參數。

我們知道，在觸發DOM上的某個事件時，會產生一個事件對象，其中包含與事件相關的所有信息。JS高程中有這樣一句話，兼容DOM的瀏覽器會將一個事件對象傳入到事件處理程序中，無論指定事件處理程序時使用什么方法，DOM0級或是DOM2級別，都會傳入事件對象。

事件處理程序有參數時直覺上還好理解，但是事件處理程序要是一個參數都沒有指定，事件對象真的會傳入事件處理程序嗎？
以一個按鈕為樣本，我們可以看看是否真的如此。

var btn = document.getElementById("myBtn");
function showMessage() {
  console.log("Clicked");
  console.log(arguments.length);
  console.log(arguments[0].type);
}
btn.onclick = showMessage;

上面代碼，使用DOM0級的方法為按鈕myBtn綁定了一個沒有指定任何參數的事件處理程序，點擊按鈕后，控制臺依次輸出Clicked、1、click。arguments對象是一個類數組對象，包含著傳入函數中的所有參數，利用它，我們可以獲得關于參數的信息。從結果可以看出，瀏覽器確實將一個事件對象傳入到事件處理程序，即便事件處理程序沒有指定任何參數。
下面，看看事件處理程序指定參數的情況。

var btn = document.getElementById("myBtn");
function showMessage(event) {
  console.log("Clicked");
  console.log(arguments.length);
  console.log(arguments[0] === event);
  console.log(event.type);
}
btn.onclick = showMessage;

點擊按鈕后，控制臺依次輸出Clicked、1、true、click。從結果可以得出，傳入一個參數時，該參數名成為arguments[0]的別名，參數和arguments[0]指向同一個對象。因為是別名，所以傳入的參數名可以是任何合法的標識符，之所以使用標識符event，是因為它更能表意，也是大家默認的習慣。
現在，可以得出結論了，無論指定事件處理程序時使用什么方法，事件處理程序始終有一個參數，也就是事件對象，由瀏覽器傳入，保存在arguments[0]。

參考資料

JavaScript高級程序設計

云服務器 GPU云服務器事件處理程序 js事件處理程序在一個c語言程序中 DOM事件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/95653.html

DOM 事件深入淺出（一）

摘要：本文就將帶大家深入淺出地了解事件的那些屬性和方法。針對不同級別的，我們的事件處理方式也是不一樣的。當然其優點是不需要操作來完成事件的綁定。文章地址事件深入淺出二。在項目開發時，我們時常需要考慮用戶在使用產品時產生的各種各樣的交互事件，比如鼠標點擊事件、敲擊鍵盤事件等。這樣的事件行為都是前端DOM事件的組成部分，不同的DOM事件會有不同的觸發條件和觸發效果。本文就將帶大家深入淺出地了解...

macg0406 2019-08-20 11:31 評論0 收藏0
【重溫基礎】20.事件

摘要：本文是重溫基礎系列文章的第二十篇。事件捕獲為截獲事件提供機會，然后實際的目標接收到事件，最后事件冒泡，對事件作出響應。事件處理事件處理，即響應某個事件。包括導致事件的元素事件類型等其他信息。本文是重溫基礎系列文章的第二十篇。這是第三個基礎系列的第一篇，歡迎持續關注呀！重溫基礎系列的【初級】和【中級】的文章，已經統一整理到我的【Cute-JavaScript】的Java...

Blackjun 2019-08-26 13:28 評論0 收藏0
DOM事件流與事件委托

摘要：事件流與事件委托事件，即文檔或瀏覽器中發生的一些特定交互的瞬間，我們可以利用事件監聽來預定事件，當事件發生的時候執行相應的處理程序。本文主要討論事件流的三個階段，及利用事件委托機制進行性能優化。事件流與事件委托事件，即文檔或瀏覽器中發生的一些特定交互的瞬間，我們可以利用事件監聽來預定事件，當事件發生的時候執行相應的處理程序。當事件發生在某個DOM節點上時，事件在DOM結構中進行一級...

chaos_G 2019-08-20 11:19 評論0 收藏0
前端小知識--JavaScript事件流

摘要：事件事件指可以被偵測到的行為。事件通常與函數配合使用，當事件發生時函數才會執行。兩家公司對于事件流出現了截然相反的定義。級事件規定的事件流包括三個階段事件捕獲階段處于目標階段事件冒泡階段。我們又把事件處理程序稱為事件偵聽器。 JavaScript事件流 0.DOM級別與DOM事件首先在介紹DOM事件之前我們先來認識下DOM的不同級別。針對不同級別的DOM，我們的DOM事件處理方式也是...

Taste 2019-08-26 11:43 評論0 收藏0
Event Handler 事件處理程序 1 ---《高程3》

摘要：為屬性賦值匿名函數事件作用域使用級方法指定的事件處理程序被認為是元素的方法。最后這個布爾值參數如果是，表示在捕獲階段調用事件處理程序如果是，表示在冒泡階段調用事件處理程序。事件捕獲和事件冒泡 DOM2級事件規定的事件流包括三個階段：事件捕獲、處于目標階段和事件冒泡。首先發生的是事件捕獲，從外部節點到內部節點依次遍歷，為截獲事件提供了機會。然后是實際的目標接收到事件。最后一個階段是冒泡...

WalkerXu 2019-08-20 11:31 評論0 收藏0