# How to use jQuery.click() to capture click events on elements

Instead of writing complex event handlers, you can easily link functions to **click events** on HTML elements using jQuery.click(). Doing so will make the source code more compact and clearer.

## What is the jQuery.click() method?

By applying the jQuery.click() method to a specific HTML element and passing a function as an argument, the method will be called-up when the corresponding element is clicked. Similarly, this function can be used to perform other tasks you need, such as:

- **Changing element properties** with [jQuery.addClass()](https://www.ionos.ca/digitalguide/websites/web-development/jquery-addclass/)
- **Triggering other events**
- **Loading content** via AJAX with [jQuery.ajax()](https://www.ionos.ca/digitalguide/websites/web-development/jquery-ajax/)

jQuery.click() can also be effectively combined with looping functions like [jQuery.each()](https://www.ionos.ca/digitalguide/websites/web-development/jquery-each/).

Tip Are you planning on creating a website? At IONOS, you’ll find the perfect solution, with extensive [webspace](https://www.ionos.com/hosting/webspace "Webspace from IONOS"), affordable rates and customizable features. IONOS’ server infrastructure ensures faster loading times and trouble-free use of your websites; essential for both users and search engines.

## What is the syntax of the jQuery.click() method?

The syntax of jQuery.click() is as follows:

```jQuery
$(selector).click(function);
```

`function` in this case is an optional parameter that is executed when a click event occurs.

If you want to brush up your **basic jQuery** knowledge, you can take a look at our [jQuery tutorial](https://www.ionos.ca/digitalguide/websites/web-development/jquery-tutorial-introduction-and-first-steps/). There you’ll find all the information about syntax and selectors.

Tip Using the [IONOS API](https://developer.hosting.ionos.com "IONOS Developer API") will give you the flexibility to integrate IONOS services seamlessly into your own applications, and to automate access to resources and data. A competent customer support team will be ready to answer your questions and assist you with any problems you may have.

## What is the difference between jQuery.click() and .onClick?

The main difference between jQuery.click and .onClick is that jQuery.click() is a jQuery library method, whereas .onClick is an **event handler**, and thus part of the native JavaScript DOM API. It is used directly on the DOM element and requires the specification of a function to be called on an event. The syntax takes the form of `element.onClick = handler`, by which `element` is the DOM element and `handler` is the function that will be carried out on a click-event.

Another difference is that the jQuery.click() function provides certain benefits beyond the native .onClick method. These include simplification of code writing, **improved browser compatibility**, and the ability to respond to dynamically added elements.

## An example of how to use jQuery.click()

The following click-event `jQuery.click() button` causes a popup window to appear with the text `The button was clicked` when the element is clicked.

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

Tip [Deploy Now](https://www.ionos.ca/hosting/deploy-now "Deploy Now from IONOS") from IONOS is a convenient solution to run applications on cloud platforms quickly and easily, without having to worry about the complex configuration processes. With Deploy Now, you can automatically deploy your website directly from a code repository like GitHub.


This is a markdown version of: [https://www.ionos.ca/digitalguide/websites/web-development/jquery-click/](https://www.ionos.ca/digitalguide/websites/web-development/jquery-click/) for AI/LLM consumption.