Si se crea un evento y hay alguna actividad del usuario pero no desea que el elemento reaccione a ese evento en particular por algún propósito, entonces para hacerlo tenemos el método removeEventListener() en JavaScript. El removeEventListener() es un función incorporada en JavaScript que elimina un controlador de eventos de un elemento para un evento adjunto. Por ejemplo, si un botón está deshabilitado después de un clic, puede usar removeEventListener() para eliminar un detector de eventos de clic.
Sintaxis:
element.removeEventListener(event, listener, useCapture)
Parámetros: Acepta tres parámetros que se especifican a continuación:
- evento: es una string que describe el nombre del evento que debe eliminarse.
- oyente: es la función del controlador de eventos eliminar.
- useCapture: Es un parámetro opcional. De forma predeterminada, es un valor booleano falso que especifica la eliminación del controlador de eventos de la fase de burbujeo y, si es verdadero, el método removeEventListener() elimina el controlador de eventos de la fase de captura.
Código #1:
<!DOCTYPE html>
<html>
<body>
<h3>Click this button to stop hovering effect !!</h3>
<button id="clickIt" onclick="RespondClick()">Click here</button>
<h1 id="hoverPara">Hover over this Text !</h1>
<b id="effect"></b>
<script>
const y = document.getElementById("hoverPara");
y.addEventListener("mouseover", RespondMouseOver);
function RespondMouseOver() {
document.getElementById("effect").innerHTML +=
"mouseover Event !!" + "<br>";
}
function RespondClick() {
y.removeEventListener("mouseover", RespondMouseOver);
document.getElementById("effect").innerHTML +=
'You clicked the "click here" button' + "<br>" +
"Now mouseover event doesn't work !!";
}
</script>
</body>
</html>
Salida:
antes de pasar el cursor sobre el texto-
Después de pasar 2 veces sobre el texto-
Después de hacer clic en el botón «haga clic aquí»-
Nota: Si es necesario encontrar el evento desenstringdo, se puede usar la propiedad de tipo de evento. Esta propiedad se puede utilizar para eliminar un evento específico buscando el tipo de evento desenstringdo.
código #2: La propiedad event.type se puede usar para mostrar el tipo de evento desenstringdo. A continuación, el código JavaScript muestra el funcionamiento de la propiedad event.type y el método removeEventListener().
<!DOCTYPE html>
<html>
<body>
<button id="clickIt">Click here</button>
<br>
<b id="effect"></b>
<script>
const x = document.getElementById("clickIt");
x.addEventListener("click", Respond);
function Respond(e) {
document.getElementById("effect").innerHTML +=
"Type of event triggered = " + e.type + "<br><br>";
document.getElementById("effect").innerHTML +=
"Now click Event is disabled !! " + "<br><br>";
x.innerText = "Click is disable !";
// The click event is only one time triggered
// by clicking the "click here" button.
x.removeEventListener("click", Respond);
}
</script>
</body>
</html>
Salida:
antes de hacer clic en el botón «haga clic aquí»-
Después de hacer clic en el botón «haga clic aquí»-
JavaScript es mejor conocido por el desarrollo de páginas web, pero también se usa en una variedad de entornos que no son de navegador. Puede aprender JavaScript desde cero siguiendo este tutorial de JavaScript y ejemplos de JavaScript .
Publicación traducida automáticamente
Artículo escrito por vivekkothari y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA