The **`click()` method** in jQuery is a built-in method that fires an event when the relevant element is clicked on. *Clicked on* simply means that the user presses and releases the mouse button on that element.

# How do we use this method?

The `click()` method has two ways that it can be called:
1. *With* a given function argument
2. *Without* a given argument

The illustration below shows the method signature:


# Implementation

Now that we know how to call this method, let's look at both implementations of the `click()` method

## 1. With a given function argument

This implementation takes in input a `function` and runs that when the `click()` method is called.

* The code is written in the `body` of the HTML code and is written between the `script` tag.
* The function is called as an attribute of the `h1` style.
* It takes as input a separate function which is then declared within the argument.
* The function uses the `this` operator to apply the `toggle` method on the object using a delay of *1000 ms*.

<html>
 <head>
   
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

 </head>
 <body>
     
    <h1>Clicking me will toggle the text!</h1>

    <script>
      $("h1").click(function(){
        $(this).toggle(1000);
      });
    </script>
    
 </body>
</html>

codemirror

## 2. Without a given argument

In this case, the `cick()` method is called to fire an `onclick` event already assigned to an element. This way a separate element can also be used to call the `onclick` event of another element. The example below shows how this is done.

* The first step is to first declare an object of a particular style attribute which is *clickable* and declare and `onclick` action for it as shown on *line 11*.

* The second step is to create a `script` block in the `body` of the code where the `click()` method is now attributed to a different style format, `p`.

* The third step is to call the already defined `onclick` method for `h1` within this function call, as shown on *line 15*. 

* This then calls the same `onlick` method for a particular attribute on a completely separate one.


<html>
 <head>
   
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

 </head>
 <body>
    

    <p>Click here to show alert for h1</p>
    <h1 onclick = "alert('onclick for h1')";>Clicking me will call an alert!</h1>
 
    <script>
      $("p").click(function(){
        $("h1").click();
      });
    </script>
 
 </body>
</html>

The "click" method in jQuery

How do we use this method?

Implementation

1. With a given function argument

2. Without a given argument