Aquí, la tarea es eliminar un controlador de eventos en jQuery/JavaScript. Hay tres métodos para resolver este problema que se analizan a continuación:
Usar el método unbind(): es un método incorporado en jQuery que se usa para eliminar cualquier controlador de eventos seleccionado.
Sintaxis:
$(selector).unbind(event, function, eventObj)
Acercarse:
- Seleccione el selector en el que se eliminará el controlador de eventos.
- Use el método unbind() para eliminar el evento.
- Después de hacer clic en la función bajo la cual funciona la desvinculación, se eliminará el controlador de eventos.
Ejemplo 1:
html
<!DOCTYPE html>
<html>
<head>
<title>
jQuery | How to remove an event handler?
</title>
</head>
<body style = "text-align:center;">
<h1 style = "color:green;" >
GeeksForGeeks
</h1>
<h3>
Remove an event handler using unbind method
</h3>
<h4>Element to remove</h4>
<button>
Click Here
</button>
<script>
$(document).ready(function() {
$("h4").click(function() {
$(this).slideToggle();
});
$("button").click(function() {
$("h4").unbind();
});
});
</script>
</body>
</html>
Producción:
- Antes de hacer clic en cualquier lugar:
- Después de hacer clic en el elemento h4:
- Después de hacer clic en el botón, el evento no funcionará:
Uso del método off(): se utiliza para eliminar los controladores de eventos adjuntos con el método on().
Sintaxis:
$(selector).off(event, selector, function(eventObj), map)
Acercarse:
- Seleccione el selector en el que se eliminará el controlador de eventos.
- Utilice el método off() para eliminar el evento.
- Después de hacer clic en la función bajo la cual funciona la desvinculación, se eliminará el controlador de eventos.
Ejemplo 2:
html
<!DOCTYPE html>
<html>
<head>
<title>
jQuery | How to remove an event handler?
</title>
</head>
<body style = "text-align:center;">
<h1 style = "color:green;" >
GeeksForGeeks
</h1>
<h3>
Remove an event handler using off method
</h3>
<h4>Element to remove</h4>
<button>
Click Here
</button>
<script>
$(document).ready(function() {
$("h4").click(function() {
$(this).slideToggle();
});
$("button").click(function() {
$("h4").off();
});
});
</script>
</body>
</html>
Producción:
- Antes de hacer clic en cualquier lugar:
- Después de hacer clic en el elemento h4:
- Después de hacer clic en el botón, el evento no funcionará:
Publicación traducida automáticamente
Artículo escrito por SHUBHAMSINGH10 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA