El método off() en jQuery se usa para eliminar los controladores de eventos adjuntos con el método on(). El método off() aporta mucha consistencia a la API y reemplaza los métodos unbind(), die() y undelegate().
Sintaxis:
$(selector).off(event, selector, function(eventObj), map)
Parámetro: este método acepta cuatro parámetros, como se mencionó anteriormente y se describe a continuación:
- event: es un parámetro obligatorio y se utiliza para especificar uno o más eventos o espacios de nombres para eliminar de los elementos seleccionados. Múltiples eventos están separados por espacios.
- selector: es un parámetro opcional y se usa para coincidir con el que se pasó originalmente al método on() al adjuntar controladores de eventos
- function(eventObj): es un parámetro opcional y se usa para especificar la función que se ejecutará cuando ocurra el evento.
- map: este parámetro se usa para especificar el mapa de eventos ({event:function, event:function, …}) que contiene uno o más eventos adjuntos a los elementos y funciones para ejecutar cuando ocurren los eventos.
Ejemplo 1: este ejemplo elimina el controlador de eventos.
<!DOCTYPE html>
<html>
<head>
<title>
jQuery off() method
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<!-- Script to remove event handler -->
<script>
$(document).ready(function() {
$("h3").on("click", function() {
$(this).css("background-color", "green");
});
$("button").click(function() {
$("h3").off("click");
});
});
</script>
</head>
<body>
<h3>GeeksforGeeks</h3>
<button>
Click to remove event handler
</button>
</body>
</html>
Salida:
Antes Haga clic en el elemento h3: 
Después Haga clic en el elemento h3:
Ejemplo 2: este ejemplo usa un evento animado para agregar un efecto de animación una vez y luego elimina el controlador de eventos.
<!DOCTYPE html>
<html>
<head>
<title>
jQuery off() method
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<!-- Script to animate the event -->
<script>
$(document).ready(function() {
var x = 0;
$("h3").click(function(event) {
$("h3").animate({fontSize: "+=10px"
});
x++;
if (x >= 1) {
$(this).off(event);
}
});
});
</script>
</head>
<body style="text-align:center;">
<h1>Welcome to GeeksforGeeks!.</h1>
<div style="background-color:green;">
<h3>
Geeks for Geeks. Click to increase
the size (only one time)
</h3>
</div>
</body>
</html>
Salida:
Antes Haga clic en el encabezado: 
Después Haga clic en el encabezado:
Publicación traducida automáticamente
Artículo escrito por AdeshSingh1 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA