AddEventListener（）及其示例-yiteyi-C++库

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

null

element.addEventListener(event, listener, useCapture);

参数：

活动： 事件可以是任何有效的JavaScript事件。使用事件时不带“on”前缀，比如使用“click”而不是“onclick”，或使用“mousedown”而不是“onmousedown”。
侦听器（处理程序函数）： 它可以是响应事件发生的JavaScript函数。
使用捕获： 它是用于控制事件传播的可选参数。传递布尔值，其中“ 符合事实的 “表示捕获阶段和” 错误的 “表示起泡阶段。

显示addEventListener（）方法工作的JavaScript代码： 代码#1：

javascript

                         <!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>                       

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

图片[1]-AddEventListener（）及其示例-yiteyi-C++库

单击“单击此处”按钮后：

图片[2]-AddEventListener（）及其示例-yiteyi-C++库

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

javascript

                         <!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>                       