El método unbind() es un método incorporado en jQuery que se utiliza para eliminar los controladores de eventos seleccionados. Este método se puede usar para eliminar un controlador de eventos en particular o detener funciones específicas. Funciona en cualquier controlador de eventos usando un objeto de evento.
Nota: Si no se proporcionan parámetros, el método funciona en todos los controladores de eventos del elemento especificado.
Sintaxis:
$(selector).unbind(event, function, eventObj)
Parámetros: este método acepta tres parámetros, como se mencionó anteriormente y se describe a continuación:
- evento: Es un parámetro opcional que se utiliza para especificar eventos (uno o más) para eliminarlos de los elementos.
- función: es un parámetro opcional que se utiliza para especificar el nombre de la función para desvincularse del evento especificado para el elemento.
- eventObj: es un parámetro opcional que se utiliza para especificar el objeto de evento que se eliminará de la función de vinculación de eventos.
Ejemplo 1: este ejemplo describe el método unbind() para eliminar el controlador de eventos del elemento seleccionado.
<!DOCTYPE html>
<html>
<head>
<title>
jQuery unbind() Method
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
</head>
<body style = "text-align:center;">
<h1 style = "color:green;" >
GeeksForGeeks
</h1>
<button>
Click Here
</button>
<!-- Script to illustrates unbind() method -->
<script>
$(document).ready(function() {
$("h1").click(function() {
$(this).slideToggle();
});
$("button").click(function() {
$("h1").unbind();
});
});
</script>
</body>
</html>
Producción:
- Antes de hacer clic en cualquier lugar:
- Después de hacer clic en el elemento h1:
- Después de hacer clic en el botón, el evento no funcionará:
Ejemplo 2: este ejemplo describe el método unbind() para eliminar el controlador de eventos del elemento seleccionado.
<!DOCTYPE html>
<html>
<head>
<title>
jQuery unbind() Method
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<style>
h1 {
border: 1px solid black;
height: 100px;
padding-top: 35px;
background: green;
color: white;
}
</style>
</head>
<body style = "text-align:center;">
<h1>GeeksForGeeks</h1>
<button>
Remove event handler from geeks for geeks
</button>
<!-- Script to illustrates unbind() method -->
<script>
$(document).ready(function() {
$("h1").click(function() {
$(this).slideToggle();
});
$("button").click(function() {
$("h1").unbind();
});
});
</script>
</body>
</html>
Producción:
- Antes de hacer clic en cualquier lugar:
- Después de hacer clic en el elemento h1:
- Después de hacer clic en el botón, el evento no funcionará:
Publicación traducida automáticamente
Artículo escrito por ashishsaini3 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA