logo

Eventos JavaScript onclick() – Tutorial, con ejemplos

JavaScript añade interactividad a las páginas web. Este artículo le muestra cómo activar funciones de JavaScript cuando se hace clic en un elemento HTML usando onclick() eventos y atributos. Ejemplos de código incluidos.

Eventos de JavaScript

Un evento en JavaScript simplemente significa que algo ha sucedido. El ratón se ha movido o se ha pulsado una tecla y JavaScript ha sido notificado por la generación de un evento .

hacer clic Evento

Cuando el usuario hace clic en algo, el onclick se genera un evento, lo que le permite activar código JavaScript cuando se hace clic en un elemento.

Definir onclick Eventos

Hay varias formas de definir eventos onclick, que se describen a continuación.

HTML en línea

El primer método es simplemente colocar el código JavaScript en un atributo onclick dentro de la etiqueta HTML para el elemento que desea que se pueda hacer clic:

<element onclick="myFunction">

Tenga en cuenta que:

Ejemplo

<a href="#" onclick="alert("You clicked me!");">Click me!</a>

Arriba, se define un enlace HTML. Por lo general, el href el atributo apunta a la dirección de otro sitio web o página, pero en este caso, se establece en # – lo que significa que no lleva a ninguna parte.

Un onclick se ha agregado el atributo, que muestra una alerta de JavaScript.

Cuando se hace clic en el vínculo, se activa el evento onclick y se muestra la alerta.

Controladores de eventos

Mantener su código JavaScript separado de su código HTML hace que su código sea más manejable en general:no tiene que buscar a través del HTML al depurar o actualizar su lógica JavaScript. Los siguientes métodos separan el onclick controladores de eventos en su totalidad:

object.onclick = function(){myFunction};

Tenga en cuenta que:

  • objeto es una referencia al elemento HTML en el que desea hacer clic
  • miFunción es el código que desea ejecutar cuando se hace clic en él

Ejemplo

<button id="clickable">Click me!</button>

<script>
    document.getElementById("clickable").onclick = function() {alert("You clicked me!");};
</script>

Como puede ver, todo el JavaScript ahora está en el mismo lugar, por lo que puede ver exactamente lo que está sucediendo. La parte HTML solo contiene el elemento que se mostrará al usuario; la lógica está separada.

Oyentes de eventos

Los detectores de eventos se pueden usar para cumplir el mismo propósito que el anterior:separar la lógica de JavaScript del diseño HTML.

object.addEventListener("click", myFunction);

Ejemplo

<button id="clickable">Click me!</button>

<script>
    document.getElementById("clickable").addEventListener("click", alert("You clicked me!")); 
</script>

Un uso común para onclick() es actualizar la página en un navegador web.

Para obtener más información sobre cómo agregar interactividad a las páginas web mediante JavaScript, consulte los documentos para desarrolladores de Mozilla.


No