Manejar evento de clic de botón en jQuery

En la publicación de hoy, aprenderemos sobre el evento de botón click en jQuery.

Manejar el evento click del botón en jQuery

jQuery tiene un enfoque integrado .click() que vincula un controlador de eventos al evento click de JavaScript o distribuye este evento en un elemento.

Sintaxis:

.click(handler).click([eventData], handler)

1. El handler es una función que se ejecuta cada vez que se dispara el evento.
2. Los eventData son un objeto que contiene datos que debe superar el controlador de eventos.

Este método es una abreviatura de .on("click", handler ) en las dos primeras variantes y .trigger( "click" ) en la tercera. El evento click se envía a un elemento mientras el puntero del mouse está sobre el elemento, y el botón del mouse se presiona y se inicia.

Cualquier elemento HTML puede recibir este evento. Como el método .click() es solo una abreviatura de .on("click", handler ), se puede separar con .off("click").

El evento click solo se envía después de esta serie exacta de eventos:

1. Se presiona el botón del mouse mientras el puntero del mouse está sobre el elemento.
2. El botón del mouse se suelta mientras el puntero del mouse está sobre el elemento.

Esta suele ser la secuencia deseada antes de realizar una acción. Si esto no es necesario, el evento mousedown o mouseup podría ser más apropiado.

Entendámoslo con el siguiente ejemplo:

<button id="btn">Hello World!</button>

$('#btn').click(() => {console.log('Click event fired')});

En el ejemplo anterior, hemos definido el elemento button. El evento click se envía y la función se ejecuta tan pronto como se hace clic en el botón.

Intente ejecutar el fragmento de código anterior en cualquier navegador que admita jQuery. Va a mostrar el siguiente resultado:

Producción :

Click event fired

Vea la demostración aquí.