En este artículo, aprenderemos cómo adjuntar un evento a un elemento que debe ejecutarse solo una vez. Hay dos enfoques que se pueden utilizar aquí:
Enfoque 1: en este enfoque, utilizaremos el método jQuery one() . Este método adjunta un evento al elemento con el selector especificado. Se denomina uno porque el controlador de eventos correspondiente al evento solo se ejecuta una vez. Un botón con una clase de event-handler-btn se define en el siguiente ejemplo y el evento se adjunta a este elemento en particular. Cuando se hace clic en el botón, se muestra un mensaje de alerta. Los clics posteriores después del primer clic no funcionarán, ya que el controlador de eventos se ejecuta como máximo una vez por elemento y por tipo de evento, como se explicó anteriormente.
Sintaxis:
$(".event-handler-btn").one("click", function (e) {
// Code to be executed once
});
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<!-- Basic inline styling -->
<style>
body {
text-align: center;
}
h1 {
color: green;
font-size: 40px;
}
button {
cursor: pointer;
margin: 0 auto;
display: block;
margin-top: 2rem;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<button class="event-handler-btn">
Click to execute event
</button>
<script type="text/javascript">
$(".event-handler-btn").one("click", function (e) {
alert("GeeksForGeeks!");
});
</script>
</body>
</html>
Producción:
Enfoque 2: en este enfoque, utilizaremos los métodos on() y off() de jQuery. El método on() también adjunta un evento al elemento con el selector especificado, pero la diferencia es que el controlador de eventos se ejecuta cada vez que se hace clic en el botón con la clase event-handler- btn , no una vez como se explicó en el enfoque anterior. con el método one() . Cuando se hace clic en el botón, se muestra un mensaje de alerta. Los clics subsiguientes después del primer clic no funcionarán, ya que estamos llamando explícitamente al método off() dentro del método on() en el mismo elemento usando este objeto en jQuery. Esto significa que elEl método off() niega el método on() ya que el método off() elimina el detector de eventos de ese elemento en particular. Por lo tanto, el detector de eventos solo se ejecuta una vez.
Sintaxis:
$(".event-handler-btn").on("click", function (event) {
// Code to be executed once
$(this).off(event);
});
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<!-- Basic inline styling -->
<style>
body {
text-align: center;
}
h1 {
color: green;
font-size: 40px;
}
button {
cursor: pointer;
margin: 0 auto;
display: block;
margin-top: 2rem;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<button class="event-handler-btn">
Click to execute event
</button>
<script type="text/javascript">
$(".event-handler-btn").on("click", function (event) {
alert("GeeksForGeeks!");
$(this).off(event);
});
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por rajatsandhu2001 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA