JavaScript | addEventListener() 与示例

先决条件： JavaScript 事件
事件是 JavaScript 的重要组成部分。网页根据发生的事件做出响应。有些事件是用户生成的，有些是由 API 生成的。事件侦听器是 JavaScript 中等待事件发生的过程。事件的简单示例是用户单击鼠标或按下键盘上的键。
addEventListener()是 JavaScript 中的一个内置函数，它接收要侦听的事件，并在所描述的事件被触发时调用第二个参数。可以将任意数量的事件处理程序添加到单个元素，而不会覆盖现有的事件处理程序。
句法：

element.addEventListener(event, listener, useCapture);

参数：

• event : event 可以是任何有效的 JavaScript 事件。使用不带“on”前缀的事件，例如使用“click”而不是“onclick”或“mousedown”而不是“onmousedown”。
• listener(handler 函数) ：它可以是响应事件发生的 JavaScript函数。
• useCapture：它是一个可选参数，用于控制事件传播。传递一个布尔值，其中“ true ”表示捕获阶段，“ false ”表示冒泡阶段。

显示 addEventListener() 方法工作的 JavaScript 代码：
代码#1：

javascript

  

    Click here
    
    
    document.getElementById("try").addEventListener("click", function(){
    document.getElementById("text").innerText = "GeeksforGeeks";
});
    

  

输出：
在单击“单击此处”按钮之前：

点击“点击这里”按钮后：

代码#2：
在这个例子中，两个事件“mouseover”和“mouseout”被添加到同一个元素。如果将文本悬停在上方，则发生“mouseover”事件并调用 RespondMouseOver函数，类似于调用“mouseout”事件 RespondMouseOut函数。

javascript

  

    Click here
  
    Hover over this Text !
  
  
    
  
    
        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>";
        }
    

  

输出：
在单击“单击此处”按钮并将鼠标悬停在文本上之前：

单击“单击此处”按钮并将鼠标悬停在文本上后：

JavaScript 以网页开发而闻名，但它也用于各种非浏览器环境。您可以按照这个 JavaScript 教程和 JavaScript 示例从头开始学习 JavaScript。