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。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。