Función OnClick en JQuery explicada con ejemplos

Una de las bibliotecas rápidas, pequeñas y ricas en funciones de JavaScript es jQuery. jQuery se usa para hacer documentos HTML, manejo de eventos, recorrido y manipulación, etc.

Cada vez que se hace clic en un elemento HTML, se produce el evento de clic de jQuery. Para activar la función onclick en jQuery , se utiliza el método click(). Por ejemplo, al hacer clic en un párrafo de un documento, el método $(“p”).click() activará un evento de clic. El usuario puede adjuntar una función a un método de clic siempre que ocurra un evento de clic para ejecutar la función. Por lo tanto, se ejecuta una pieza de código cada vez que se activa un evento de click().

El clic del mouse se simula a través del método HTMLElement.click().

La función Click() es una función incorporada en jQuery que inicia un evento de clic. Cada vez que se hace clic en un elemento relevante, se activa un evento mediante un método click(). Este evento luego activa un evento de clic de elementos más arriba en el árbol del documento (o cadena de eventos).

Como sugiere el nombre, es simplemente presionar y soltar el botón del mouse por parte del usuario sobre el elemento.

Uno o más controladores de eventos se adjuntan a los elementos seleccionados a través del método on(). Al hacer clic en un elemento, se produce un evento de clic(). Un método click() se ejecuta una vez que ocurre un evento de click(). Una función se adjunta a un método click() y se ejecuta. Se utiliza un método click() con otros eventos de jQuery.

Por lo tanto, .click() vincula un controlador de eventos al evento de JavaScript "clic", o activa un evento sobre un elemento. Las variaciones del método onclick de JavaScript son:

1. .click (controlador).
2. .click([eventData], controlador).
3. .hacer clic().

La primera y la segunda variación son una forma abreviada de .on(“clic”, controlador) y el atajo de .trigger(“clic”) en la última variación.

Cada vez que el puntero del mouse se encuentra sobre el elemento y el botón se presiona y se suelta, el evento click() se envía a ese elemento. El evento puede ser recibido por cualquier elemento del HTML.

El evento Click() también se puede activar si se hace clic en el otro elemento a través del siguiente código.

Con este código, el mensaje será alertado por el elemento

A través de los siguientes eventos, solo se activa un evento click().

• Cuando el puntero de un mouse está dentro de un elemento y el botón del mouse está presionado.
• Cuando el puntero de un mouse está dentro de un elemento y se suelta el botón del mouse.

Antes de realizar una acción, los eventos mencionados anteriormente suelen tener la secuencia deseada. De lo contrario, el otro evento adecuado es el evento mouse down o mouse up.

Debido a que el método .click() es el atajo para .on(“click”, handler), la posibilidad de desconectar está presente mediante el uso de .off(“click”).

Uso

Hay dos formas presentes que se pueden usar para llamar a un método click():

• Con un argumento de función dado
• Sin un argumento dado

La función onclick en jQuery se puede usar en elementos de HTML como div, párrafos, hipervínculos, etc. para realizar la tarea deseada. Un clic es un evento del mouse que ocurre al presionar el botón del mouse. Sin embargo, el evento ocurrirá si el puntero del mouse está dentro del elemento.

Sintaxis:

$(selector).clic() ; -> utilizado para activar un evento de clic para los elementos seleccionados.

$(selector).click(función); -> utilizado para adjuntar una función a un evento de clic.

• El parámetro opcional utilizado es la "función" que se utiliza para la ejecución cuando se produce un evento de clic.
• Valor devuelto: Se devuelve el elemento seleccionado que se especifica con la función a realizar.

Implementación del método click()

1. Cuando se da un argumento de función

En este tipo de implementación, se toma una función como entrada y se ejecuta cada vez que se llama al método click().

• La escritura del código se encuentra entre la etiqueta del script y dentro del cuerpo HTML del código.
• La llamada de la función se realiza como un atributo de estilo h1.
• Un argumento se declara con la función y se toma como una función por separado.
• El cambio de método se aplica sobre el objeto utilizando este operador con un retraso de 1000 ms.
• A continuación se muestra un ejemplo del método de implementación con un argumento de función dado.

El resultado del código será "¡Hacer clic en mí alternará el texto!"

2. Cuando no se da ningún argumento

El método javascript onclick dispara un evento de Ya hay un elemento asignado al método. Por lo tanto, un elemento puede llamar al evento onclick de otro elemento por separado. Esto se puede lograr a través de los siguientes pasos:

1. Primero se debe declarar un objeto con un atributo de un estilo particular en el que se pueda hacer clic. Se debe declarar una acción onclick para el objeto.
2. Se debe crear un bloque de script en el cuerpo del código donde se realiza la atribución del método click() a un formato de estilo diferente, p .
3. El método h1 onclick que ya está definido debe llamarse dentro de la llamada de función.
4. A continuación, se recurre al mismo método onclick para un atributo.
5. A continuación se muestra un ejemplo de un código que muestra la implementación de un método click() sin un argumento determinado.

El resultado del código es "¡Hacer clic en mí generará una alerta!".

• • Se pueden usar muchos eventos en el método $.on como dblclick, change y otros.

3. Representar un botón HTML y agregar texto a la página al hacer clic en el botón. El método Click() se adjunta más comúnmente a un botón, sin embargo, se puede adjuntar a cualquier otro elemento en una página web.

• • Un botón básico se representa con una identificación de "btn-primary" que está dentro de un <div> con una identificación de "main.
  • A través del código, el nuevo contenido se mostrará con una clase de "nuevo contenido" en la etiqueta <p> después de hacer clic en el botón.
  • El jQuery está encerrado dentro de las etiquetas <script>.

• • El método click() se adjunta a la identificación del botón y se toma un argumento como una función de devolución de llamada, que es una función anónima.
  • La función de devolución de llamada devuelve la cadena "Botón pulsado".

• • Una función sin nombre simplemente se denomina función anónima y se usa como devolución de llamada como argumentos de un método. Para crear sitios web y aplicaciones receptivos, las funciones anónimas y los métodos de devolución de llamada actúan como la piedra angular.

• • El código comenzará con el botón dentro de <div> “main”.
  • Una vez que se hace clic en el botón, el controlador de eventos llamará a la función de devolución de llamada ya que el método click() está adjunto al selector de botón.
  • Se mostrará la cadena "Botón pulsado".
  • El código anterior representará el contenido solo una vez, sin embargo, para mostrar la cadena cada vez que se hace clic en el código, se usa append() en lugar de HTML().

• • Producirá la cadena tres veces como el nuevo contenido dentro de la etiqueta <p>.
  • La función de devolución de llamada se llama cada vez que se hace clic en el botón.

Conclusión

El funcionamiento de la función onclick en jquery se ha discutido en el artículo junto con sus usos y ejemplos. Con solo unas pocas líneas de código, la funcionalidad de la página web se puede crear a través del método onclick de JavaScript .

Si tienes ganas de aprender más sobre desarrollo web y especializarte en otras áreas relacionadas, entonces puedes consultar el curso “ Master of Science in Computer Science ” que ofrece upGrad . Diseñado especialmente para profesionales principiantes (tanto hombres como mujeres entre 21 y 45 años de edad), el curso se realizará en una plataforma en línea con sesiones en vivo, para comodidad de los viajeros de larga distancia. Con más de 30 proyectos y asignaciones, el estudiante obtendrá los beneficios del estatus de ex alumno de IIIT-Bangalore y LJMU . No dude en ponerse en contacto con nuestro equipo para cualquier ayuda.