Javascript addEventListener()用法及代碼示例

先決條件： JavaScript事件
事件是JavaScript的重要組成部分。網頁根據事件發生做出響應。有些事件是由用戶生成的，有些則是由API生成的。事件偵聽器是JavaScript中等待事件發生的過程。事件的簡單示例是用戶單擊鼠標或按鍵盤上的鍵。

addEventListener()是JavaScript中的內置函數，該函數接受事件進行偵聽，並在觸發所描述的事件時調用第二個參數。可以將任意數量的事件處理程序添加到單個元素，而不會覆蓋現有的事件處理程序。句法：

element.addEventListener(event, listener);

參數：

event:event可以是任何有效的JavaScript事件。使用沒有“on”前綴的事件，例如使用“click”代替“onclick”或“mousedown”代替“onmousedown”。
listener(handler function):它可以是響應事件發生的JavaScript函數。

JavaScript代碼顯示addEventListener()方法的用法方式：
代碼1：

<!DOCTYPE html> 
<html> 
  
<body> 
    <button id="try">Click here</button> 
    <h1 id="text"></h1> 
    <script> 
    document.getElementById("try").addEventListener("click", function(){ 
    document.getElementById("text").innerText = "GeeksforGeeks"; 
}); 
    </script> 
</body> 
  
</html>

輸出：
在單擊“Click here”按鈕之前：

單擊“Click here”按鈕後：

代碼2：
在此示例中，兩個事件“mouseover”和“mouseout”被添加到同一元素。如果將文本懸停在上方，則將發生“mouseover”事件並調用RespondMouseOver函數，對於“mouseout”事件，也將調用RespondMouseOut函數。

<!DOCTYPE html> 
<html> 
  
<body> 
    <button id="clickIt">Click here</button> 
  
    <p id="hoverPara">Hover over this Text !</p> 
  
    <b id="effect"></b> 
  
    <script> 
        const x = document.getElementById("clickIt"); 
        const y = document.getElementById("hoverPara"); 
  
        x.addEventListener("click", RespondClick); 
        y.addEventListener("mouseover", RespondMouseOver); 
        y.addEventListener("mouseout", RespondMouseOut); 
  
        function RespondMouseOver() { 
            document.getElementById("effect").innerHTML += 
                       "MouseOver Event" + "<br>"; 
        } 
  
        function RespondMouseOut() { 
            document.getElementById("effect").innerHTML += 
                      "MouseOut Event" + "<br>"; 
        } 
  
        function RespondClick() { 
            document.getElementById("effect").innerHTML += 
                      "Click Event" + "<br>"; 
        } 
    </script> 
</body> 
  
</html>

輸出：
在單擊“Click here”按鈕並將鼠標懸停在文本上之前，請執行以下操作：

單擊“Click here”按鈕並將鼠標懸停在文本上之後：

相關用法

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