HTML | Método DOM addEventListener()

El método addEventListener() adjunta un controlador de eventos al elemento especificado.

Sintaxis:

element.addEventListener(event, function, useCapture)

Nota: la captura de uso del tercer parámetro generalmente se establece en falso ya que no se usa.

El siguiente programa ilustra el DOM addEventListener():

Ejemplo:

<!DOCTYPE html>
<html>
  
<head>
    <title>DOM Location host Property</title>
    <style>
        h1 {
            color: green;
        }
          
        h2 {
            font-family: Impact;
        }
          
        body {
            text-align: center;
        }
    </style>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
    <h2>addEventListener() method</h2>
  
    <p>
     This example uses the addEventListener() 
     method to add many events on the same 
     button.
    </p>
  
    <button id="myBtn">Try it</button>
  
    <p id="demo"></p>
  
    <script>
        var x = document.getElementById("myBtn");
        x.addEventListener("mouseover", myFunction);
        x.addEventListener("click", mySecondFunction);
        x.addEventListener("mouseout", myThirdFunction);
  
        function myFunction() {
            document.getElementById("demo").innerHTML += "Moused over!<br>"
            this.style.backgroundColor = "red"
        }
  
        function mySecondFunction() {
            document.getElementById("demo").innerHTML += "Clicked!<br>"
        }
  
        function myThirdFunction() {
            document.getElementById("demo").innerHTML += "Moused out!<br>"
        }
    </script>
  
</body>
  
</html>                    

Producción:

  • Inicialmente:
  • Pase el mouse sobre el evento:
  • Evento de clic del mouse:
  • Evento de ratón fuera:

Navegadores compatibles : los navegadores compatibles con la propiedad de host de ubicación se enumeran a continuación:

  • Google Chrome
  • explorador de Internet
  • Firefox
  • Ópera
  • Safari

Publicación traducida automáticamente

Artículo escrito por MayankVandra y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *