如何在 JavaScript 中註冊事件？

HTML 和 JavaScript 之間的互動是透過事件處理的。當用戶在頁面上執行某些操作時，就會發生事件。

在本教程中，我們將學習如何在 JavaScript 中註冊事件。讓我們繼續深入討論。

使用作為 HTML 標籤屬性新增的內聯事件處理程式

在這裡，我們將學習這種標準事件註冊是如何工作的。將事件新增到DOM屬性是一種常規做法。但這是一種更糟糕的方法。

隨著 HTML 和 JavaScript 的結合，程式碼的擴充套件和維護變得困難。其次，如果程式碼在使用者與頁面元素互動時載入過晚，他們會收到錯誤。因此，我們使用賦值方法。

我們必須在 HTML 屬性和賦值方法中都使用以“on”為字首區分大小寫的事件名稱。也就是說，onclick、onfocus 等。

使用者可以按照以下語法使用此方法。

語法

<button onclick="doFunction()">
//DOM level 0 event handlers
element.onclick = doAction;
element.onclick = doAction();
element.onclick = function() {}
element.onclick();
element.fireEvent('onclick');

我們在上面同時擁有 HTML 屬性語法和各種賦值語法。

示例

在此程式中，我們在頁面載入時註冊事件。當用戶單擊標籤或按鈕時，該函式會更改其背景顏色。

<html>
<head>
   <script>
      function doAction() {
         this.style.backgroundColor = "#ffddee";
      }
      function doRegEvent() {
         idClick.onclick = doAction;
         idUser.onclick = doAction;
      }
   </script>
</head>
<body onload="doRegEvent();">
   <div id="idUser"> Hello, User! </div>
   <br>
   <button id="idClick"> Click Me! </button>
</body>
</html>

使用 addEventListener() 方法

在這裡，我們將學習addEventListener()方法的工作原理。事件型別和處理程式是此方法的兩個引數。這些是DOM級別 2 事件處理程式。

使用此方法，我們可以將事件偵聽器新增到任何HTML DOM物件，例如 HTML 文件、HTML 元素、視窗物件或 xmlHttpRequest 物件。除了 IE8 及更早版本外，所有瀏覽器都支援此方法。

我們可以向一個元素新增多個事件處理程式。我們可以將相同的事件兩次新增到相同的元素。事件處理程式的主要優點是我們可以使用關鍵字“this”訪問所有內容，而不是將值或元素傳遞給函式。

使用者可以按照以下語法在程式中使用它。

語法

element.addEventListener(event, function, bubbleCapture); //window
window.addEventListener(event, function() {});

//Passing parameters
element.addEventListener(event, function() {
   functionName(a, b);
});

在第一個語法中，我們有三個引數，如下所述。第二個語法是將事件註冊到瀏覽器視窗。第三個語法表示帶引數用法的匿名函式。

引數

  • event - 事件型別。例如，單擊。

  • function - 事件發生時呼叫的函式。

  • bubbleCapture - 布林值表示是否使用事件冒泡或事件捕獲。預設值為 false。這是一個可選引數。

示例

我們已在此程式中使用 addEventListener() 方法註冊了單擊事件。當用戶單擊按鈕時，當前日期將顯示給使用者。

<html>
<head>
   <title>JavaScript program to register events</title>
</head>
<body>
   <h3>Register events using the <i> addEventListener()</i> method</h3>
   <p>Click the below button</p>
   <button id="idBtn">Try it</button>
   <p id="idOut"></p>
   <script>
      document.getElementById("idBtn").addEventListener("click", showDate);
      function showDate() {
         document.getElementById("idOut").innerHTML = Date();
      }
   </script>
</body>
</html>

使用 attachEvent() 方法

在這裡，我們將學習attachEvent()方法的工作原理。event 方法是 IE 特定的，僅在 IE8 及以下版本中有效。

IE 不支援事件冒泡。因此，此方法只需要事件型別和處理程式引數。我們需要在 attach event 語法中提供 onclick 以註冊單擊事件。但對於事件偵聽器方法，我們需要編寫 click 以註冊單擊事件。

要呼叫此方法的已註冊函式，我們需要使用 window 物件。這些函式是全域性的。

使用者可以按照以下語法在程式中使用此方法。

語法

element.attachEvent (event, functionName);

從上面的語法中，我們可以注意到 addEventListener 方法之間的相似之處。

引數

  • event - 事件型別。例如，焦點。

  • function - 事件發生時執行的函式。

示例

在此程式中，我們在 head 部分註冊了事件。我們添加了事件偵聽器方法和事件附加方法。當用戶單擊按鈕時，按鈕文字將更改並顯示給使用者。

<html>
<head>
   <script type="text/javascript">
      function onEventAttach (){
         ataBtn.innerHTML = "Event Registered";
      }
      function doAddEvent() {
         var ataBtn = document.getElementById ("ataBtn");
         if (ataBtn.addEventListener) {
            ataBtn.addEventListener ("click", onEventAttach, false);
         } else {
            if (ataBtn.attachEvent) {
               ataBtn.attachEvent ('onclick', onEventAttach);
            }
         }
      }
   </script>
</head>
<body onload = "doAddEvent();" >
   <h2>Register events using the <i>attachEvent()</i> method</h2>
   <button id = "ataBtn" style = "background-color:#fbbbbf ">Click on this button</button>
</body>
</html>

在本教程中，我們學習了三種註冊 JavaScript 事件的方法。

賦值方法非常簡單。但它只允許每個元素新增一個處理程式。HTML 屬性事件註冊不是一種好的使用方法。

新增事件偵聽器使用起來更方便，並且允許向一個元素新增多個事件處理程式。只有當我們需要在 IE8 或更高版本中註冊事件時，才能使用 attachEvent 方法。

更新於: 2022年9月6日

3K+ 瀏覽量

啟動您的 職業生涯

透過完成課程獲得認證

開始學習
廣告