2.2 KiB
| title | localeTitle |
|---|---|
| Onclick Event | Evento onclick |
Evento onclick
El evento onclick en JavaScript te permite como programador ejecutar una función cuando se hace clic en un elemento.
Ejemplo
<button onclick="myFunction()">Click me</button>
<script>
function myFunction() {
alert('Button was clicked!');
}
</script>
En el ejemplo simple anterior, cuando un usuario hace clic en el botón, verá una alerta en su navegador que muestra ¡ Button was clicked! clic en el botón Button was clicked! .
Añadiendo onclick dinámicamente
El evento onclick también se puede agregar mediante programación a cualquier elemento usando el siguiente código en el siguiente ejemplo:
<p id="foo">click on this element.</p>
<script>
var p = document.getElementById("foo"); // Find the paragraph element in the page
p.onclick = showAlert; // Add onclick function to element
function showAlert(event) {
alert("onclick Event triggered!");
}
</script>
Nota
Es importante tener en cuenta que al usar onclick podemos agregar solo una función de escucha. Si desea agregar más, simplemente use addEventListener (), que es la forma preferida para agregar la escucha de eventos.
En el ejemplo anterior, cuando un usuario hace clic en el elemento de paragraph en el html , verá una alerta que muestra el onclick Event triggered en el clic.
Prevenir la acción por defecto
Sin embargo, si adjuntamos onclick a los enlaces (HTML es a etiqueta) podríamos querer evitar que ocurra una acción predeterminada:
<a href="https://guide.freecodecamp.org" onclick="myAlert()">Guides</a>
<script>
function myAlert(event) {
event.preventDefault();
alert("Link was clicked but page was not open");
}
</script>
En el ejemplo anterior, evitamos el comportamiento predeterminado de a elemento (enlace de apertura) utilizando event.preventDefault() dentro de nuestra función de devolución de llamada onclick .