Evento al hacer click con jQuery

Con jQuery podemos aplicar eventos a cualquier elemento HTML de la página. Podemos crear botones personalizados sin la obligación de que sea un elemento <input type=button>, una simple capa <div></div> o un párrafo <p></p> puede servirnos para crear un botón.

En este tutorial, vamos a aprender cómo aplicar un evento de click a cualquier  elemento de una página, y que éste desencadene algún acontecimiento sobre cualquier otro elemento en la página, o sobre él mismo.

A continuación veremos cómo podemos hacerlo de varias formas diferentes, ya sea desde jQuery o directamente desde el archivo HTML con el atributo onclick.

Como ya hemos visto en otros tutoriales, podemos hacer uso de javascript (y por lo tanto de jQuery) de varias formas distintas, ya sea desde el propio archivo html o desde un archivo externo enlazado desde la cabecera.

En el caso de la Posibilidad 1, vamos a hacer uso del código en línea desde el archivo html con el atributo onclick.

Posibilidad 1)

El archivo index.html será el siguiente:

Copy to Clipboard

Al hacer click en el texto que nos dice: “Haz click aqui”; nos aparecerá un cuadro de alerta en nuestra página indicandonos otro mensaje nuevo, en este caso “Soy un mensaje de alerta!”.

Para que esto ocurra, hemos tenido que añadir a nuestra capa div con id capa_evento el atributo onclick, el cual va a crear un evento al hacer click sobre toda la capa, y además aplicarle una función a ese evento, en este caso un mensaje de alerta con un texto.

¿Necesitas una impresora?

En este enlace encontrarás una selección de las mejores impresoras actuales

Ir a MejoresImpresoras.com

El resultado es el de la siguiente imagen.

Posibilidad 2)

El archivo index.html será el siguiente:

Copy to Clipboard

El archivo index.js será el siguiente:

Copy to Clipboard

En este caso, si nos fijamos en la cabecera del archivo index.html, ya estamos enlazando tanto la librería de jQuery como el archivo index.js, que es el que va a contener nuestro evento click.

En la segunda línea del archivo index.js, podemos ver como estamos aplicando un evento click a un elemento, en este caso a la capa con id “capa_evento“, la cual, al hacer click sobre la misma, ejecutará la función que le pasemos como parámetro al evento .click(), que en este caso va a ser mostrar un mensaje de alerta.

El resultado es el de la siguiente imagen, exactamente el mismo que el de la posibilidad 1.

Como siempre, os dejo con las demos y los enlaces de descarga de cada uno de los ejemplos.

4.8 (95.61%) 41 votes

2020-10-09T09:28:28+00:00