jQuery.click(): detectar eventos de clic en elementos

En lugar de crear co­n­tro­la­do­res de eventos complejos, puedes vincular fá­ci­l­me­n­te funciones a eventos de clic en elementos HTML uti­li­za­n­do jQuery.click(). Esto te permite mantener un código fuente más conciso y legible.

¿Qué es el método jQuery.click()?

Cuando aplicas el método jQuery.click() a un elemento HTML es­pe­cí­fi­co y le pasas una función como argumento, dicha función se activa al hacer clic en el elemento co­rre­s­po­n­die­n­te. jQuery.click() es versátil y se utiliza para diversas acciones, como:

• Cambiar las pro­pie­da­des de elementos mediante jQuery.addClass()
• Des­en­ca­de­nar otros eventos
• Cargar contenido de forma asíncrona con jQuery.ajax()

jQuery.click() se puede combinar efi­ca­z­me­n­te con funciones de bucle como jQuery.each().

¿Cómo es la sintaxis del método jQuery.click()?

La sintaxis de jQuery.click() es la siguiente:

$(selector).click(function);

En este caso, function es un parámetro opcional que se ejecuta cuando ocurre un evento de clic.

Si quieres refrescar o ac­tua­li­zar tus co­no­ci­mie­n­tos básicos sobre jQuery, te re­co­me­n­da­mos echar un vistazo a nuestro tutorial de jQuery. En él en­co­n­tra­rás todo lo referente a la sintaxis y se­le­c­to­res de jQuery.

¿Cuál es la di­fe­re­n­cia entre jQuery.click() y .onClick?

La principal di­fe­re­n­cia entre jQuery.click y .onClick radica en que jQuery.click() es un método de la bi­blio­te­ca jQuery, mientras que .onClick es un co­n­tro­la­dor de eventos que forma parte de la API nativa del DOM en Ja­va­S­cri­pt. El método .onClick se aplica di­re­c­ta­me­n­te al elemento DOM y requiere es­pe­ci­fi­car una función que se llamará cuando ocurra un evento de clic. Su sintaxis es la siguiente: element.onClick = handler, donde element es el elemento DOM y handler es la función que se ejecutará en caso de que se produzca un evento de clic.

Otra di­fe­re­n­cia clave es que la función jQuery.click() ofrece ciertas ventajas adi­cio­na­les a las que tiene el método nativo .onClick. Estas ventajas incluyen una si­m­pli­fi­ca­ción del código, una mejor co­m­pa­ti­bi­li­dad con los na­ve­ga­do­res y la capacidad de reac­cio­nar ante elementos añadidos di­ná­mi­ca­me­n­te.

Ejemplo de uso de jQuery.click()

El siguiente evento de clic jQuery.click() button genera una ventana emergente con el texto The button was clicked cuando se hace clic en el elemento.

$("button").click(function(){
    alert("The button was clicked.");
});