Javascript addEventListener和onclick的區別用法及代碼示例

addEventListener()和單擊時兩者都監聽一個事件。單擊按鈕時兩者都可以執行回調函數。然而，它們並不相同。在本文中，我們將了解它們之間的差異。

addEventListener()

addEventListener()方法將事件處理程序附加到指定的元素。可以將任意數量的事件處理程序添加到單個元素，而無需覆蓋現有的事件處理程序。

用法:

element.addEventListener(event, listener, useCapture);

參數：

event:事件可以是任何有效的 JavaScript 事件。使用事件時不帶 “on” 前綴，例如使用 “click” 代替 “onclick” 或使用 “mousedown” 代替 “onmousedown”。
監聽器(處理函數)：它可以是響應發生的事件的 JavaScript 函數。
useCapture: (可選參數)一個布爾值，指定事件應該在捕獲階段還是在冒泡階段執行。

注意：addEventListener() 方法可以將多個事件處理程序應用於同一元素。它不會覆蓋其他事件處理程序。

例子：下麵是一段 JavaScript 代碼，顯示多個事件與一個元素關聯，並且沒有覆蓋。

HTML


<body>
  <button id="btn">Click here</button>
  <h1 id="text1"></h1>
  <h1 id="text2"></h1>
  <script>
    let btn_element = document.getElementById("btn");
    btn_element.addEventListener("click", () => {
      document.getElementById("text1")
        .innerHTML = "Task 1 is performed";
    })
    btn_element.addEventListener("click", () => {
      document.getElementById("text2")
        .innerHTML = "Task 2 is performed";
    });
  </script>
</body>

輸出：

onclick事件

單擊時event 記錄點擊活動，然後調用所需的函數，onClick 事件僅向元素添加一個事件。

用法:

onclick

<element onclick="myScript">

在 JavaScript 中：

object.onclick = function(){myScript};

單擊時隻是一個屬性。與所有對象屬性一樣，如果我們寫入多個屬性，它就會被覆蓋。

例子：下麵是一段 JavaScript 代碼，顯示多個事件不能與一個元素關聯，因為存在覆蓋

HTML


<body>
  <button id="btn">Click here</button>
  <h1 id="text1"></h1>
  <h1 id="text2"></h1>
  <script>
    let btn_element = document.getElementById("btn");
    btn_element.onclick = () => {
      document.getElementById("text1")
        .innerHTML = "Task 1 is performed";
    };
    btn_element.onclick = () => {
      document.getElementById("text2")
        .innerHTML = "Task 2 is performed";
    };
  </script>
</body>

輸出：

addEventListener 和 onclick 的區別

添加事件監聽器	單擊時
addEventListener 可以向特定元素添加多個事件。	onclick 隻能向元素添加單個事件。它本質上是一個屬性，因此會被覆蓋。
addEventListener 可以采用第三個參數來控製事件傳播。	onclick 無法控製事件傳播。
addEventListener 隻能添加到 <script> 元素或外部 JavaScript 文件中。	onclick 也可以添加為 HTML 屬性。
addEventListener 在舊版本的 Internet Explorer 中不起作用，它使用 AttachEvent 代替。	onclick 適用於所有瀏覽器。

相關用法

注：本文由純淨天空篩選整理自ArifShaikh大神的英文原創作品 Difference between addEventListener and onclick in JavaScript。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。