HTML | Método DOM removeEventListener()

El método removeEventListener() se usa para eliminar un controlador de eventos asociado con el método addEventListener(). Este método para eliminar el controlador de eventos solo se puede usar con el método addEventListener() especificado mediante una función externa.

Sintaxis:

element.removeEventListener(event, function, useCapture);

Parámetros : Esta función acepta tres parámetros como se describe a continuación:

  • event : el parámetro event especifica el nombre del evento que se eliminará.
  • función : el parámetro función especifica la función que se eliminará.
  • useCapture : el parámetro useCapture indica la fase del evento que se eliminará del controlador de eventos. Si useCapture tiene el valor booleano verdadero, elimina el controlador de eventos de la fase de captura; de lo contrario, elimina el controlador de eventos de la fase de burbujeo.

Ejemplo: en el siguiente ejemplo, llama al controlador de eventos que cambia el color de la etiqueta de división al mover el mouse sobre la división. Después de presionar el botón de cambio de color, el controlador de eventos asociado con la etiqueta de división se elimina y no aparece ningún cambio de color al mover el mouse sobre la división.

<!DOCTYPE html>
<html>
<head>
    <style>
        #myDIV {
            font-size:60px;
            border: 1px solid;
            padding: 50x;
            color: black;
        }
    </style>
</head>
  
<body>
    <div id="myDIV">
        GeeksForGeeks
    <br>
          
        <button onclick="removeHandler()" id="myBtn">
            Change color
        </button>
    </div>
      
    <script>
        document.getElementById("myDIV")
            .addEventListener("mousemove", myFunction);
          
        function myFunction() {
            document.getElementById("myDIV")
                        .style.color= "green";
        }
          
        function removeHandler() {
            document.getElementById("myDIV")
            .removeEventListener("mousemove", myFunction);
        }
    </script>
</body>
</html>                    

Salida:
Antes de presionar el botón:

Después de presionar el botón:

Navegadores compatibles: los navegadores compatibles con el método removeEventListener() se enumeran a continuación:

  • Google Chrome 1.0
  • Internet Explorer 9.0
  • Firefox 1.0
  • Ópera 7.0
  • Safari 1.0

Publicación traducida automáticamente

Artículo escrito por chaitanyashah707 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 *