如何使用 JavaScript 處理繫結事件？

在本教程中，我們將學習如何使用 JavaScript 處理繫結事件。

事件是瀏覽器或使用者在系統中執行的操作或發生的事件。有各種型別的事件代表瀏覽器或使用者執行的各種活動。例如，如果使用者點選按鈕，則會觸發名為“click”的事件。類似地，如果網頁載入完成，則會觸發名為“load”的事件。

事件監聽器是一個持續監聽或等待事件發生的程式。它是 JavaScript 中最重要的部分之一。在事件發生後執行並處理該事件的函式或方法稱為事件處理程式。

JavaScript 將事件繫結到其各自的事件處理程式以處理事件。為此目的使用 addEventListener 方法。

使用 addEventListener 將事件繫結到事件處理程式

在 JavaScript 中，addEventListener 方法將特定的事件處理程式繫結到特定的事件。它通常將事件名稱和事件處理程式函式作為引數，並將事件繫結到該事件處理程式。

語法

使用者可以按照以下語法使用 JavaScript 中的 addEventListener 處理繫結事件。

element.addEventListener(event, eventHandler, useCapture);

在上述語法中，我們將事件和 eventHandler 回撥函式作為 addEventListener 方法的引數傳遞。

引數

  • event - 需要與事件處理程式繫結的事件的名稱。

  • eventHandler - 處理特定事件的函式或方法。

  • useCapture - 定義事件處理程式是在冒泡階段還是捕獲階段執行。它是可選的，預設情況下為 false，這意味著冒泡階段。

示例

將點選事件繫結到按鈕

在下面的示例中，我們使用 addEventListener 在 JavaScript 中繫結事件。我們使用按鈕點選事件更改元素的內部文字。

<html>
<body>
   <h2>Bind an event using <i>addEventListener</i> in JavaScript</h2>
   <button id = "btn"> Click me</button>
   <p id = "root"> Welcome to Tutorialspoint!</p>
   <script>
   
      // Event Handler
      function clickHandler() {
         document.getElementById('root').innerHTML = 'Button is Clicked!'
      }
      let element = document.getElementById('btn')

      // Binding a click event
      element.addEventListener('click', clickHandler)
   </script>
 </body>
</html>

在上面的輸出中，使用者可以看到點選按鈕後，Javascript 事件監聽器觀察到“click”事件觸發，並呼叫該事件的指定事件處理程式，在本例中為 clickHandler 函式。然後，clickHandler 函式更改根 div 的內部文字。

示例

將多個事件繫結到元素

在下面的示例中，我們使用 addEventListener 在 JavaScript 中繫結多個事件。我們在這個示例中使用了“click”、“mouseenter”和“mouseleave”事件。“mouseenter”事件在使用者將滑鼠指標移到該元素上時觸發。“mouseleave”事件在使用者將滑鼠指標離開該元素時觸發。我們使用事件處理程式更改該元素的背景顏色和文字。

<html>
<body>
   <h2>Bind multiple events using <i>addEventListener</i> in JavaScript</h2>
   <div id = "element" style = "border: 1px solid black; padding: 10px;">
      Welcome to Tutorialspoint!
   </div>
   <script>
      let element = document.getElementById('element')
 
      // Event Handlers
      function clickHandler() {
         element.innerHTML = 'The element is Clicked!'
         element.style.backgroundColor = '#ff9797'
      }
      function mouseEnterHandler() {
         element.innerHTML = 'The Mouse pointer is on the element!'
         element.style.backgroundColor = '#56ea87'
      }
      function mouseLeaveHandler() {
         element.innerHTML = 'The Mouse pointer leaves the element!'
         element.style.backgroundColor = '#56eade'
      }
 
      // Binding multiple events
      element.addEventListener('click', clickHandler)
      element.addEventListener('mouseenter', mouseEnterHandler)
      element.addEventListener('mouseleave', mouseLeaveHandler)
   </script>
</body>
</html>

使用 removeEventListener 從事件中刪除事件處理程式

在 JavaScript 中，removeEventListener 用於刪除與事件關聯的特定事件處理程式。它在引數中獲取事件和事件處理程式，並且該方法刪除它們之間的繫結。

語法

使用者可以按照以下語法在 JavaScript 中使用 removeEventListener。

element.removeEventListener(event, eventHandler, useCapture)

引數

  • event - 需要與事件處理程式解綁的事件的名稱。

  • eventHandler - 處理特定事件的函式或方法。

  • useCapture - 定義事件處理程式是在冒泡階段還是捕獲階段執行。它是可選的，預設情況下為 false，這意味著冒泡階段。

示例

在下面的示例中，我們使用 removeEventListener 在 JavaScript 中將事件與關聯的事件處理程式解綁。我們透過按鈕的“click”事件處理程式將“mouseenter”事件的事件處理程式與該事件解綁。“mouseenter”事件處理程式會遞增計數器值，並且透過使用“停止計數”按鈕，我們阻止計數器進一步遞增。

<html>
<body>
   <h2>Unbinding an event from the associated event handler using <i>removeEventListener</i> in JavaScript</h2>
   <button id = "btn"> Stop Counter</button>
   <div id = "element" style = "border: 1px solid black; padding: 10px;">
      Counter: 0
   </div>
   <script>
      let element = document.getElementById('element')
      let button = document.getElementById('btn')
      let count = 0
      
      // Event Handlers
      function mouseEnterHandler(){
         count += 1
         element.innerHTML = "Counter: " + count
      }
      function clickHandler(){
 
         // unbinding mouseenter event
         element.removeEventListener('mouseenter', mouseEnterHandler)
      }
 
      // Binding events
      button.addEventListener('click', clickHandler)
      element.addEventListener('mouseenter', mouseEnterHandler)
   </script>
 </body>
</html>

在“停止計數”按鈕之前，點選計數器在“mouseenter”事件上遞增。

點選“停止計數”按鈕後，計數器停止。

更新於: 2022-08-26

10K+ 瀏覽量

開啟你的 職業生涯

透過完成課程獲得認證

開始學習
廣告