jQuery click() vs. onclick

Let's see what is the difference between the jQuery .click() method and onclick event?
Submitted by Pratishtha Saxena, on November 22, 2022

jQuery click() Method

Whenever the selected element is clicked on the web-page, the click event occurs, which further triggers the click() method. If any function is attached to it, then the function also gets fired along. Using click() method, we can perform various other tasks related to the element.

Syntax:

$('selector').click();
$('selector').click(function(){});

The click() method accepts an optional parameter – function. It can be defined according to the need to perform some other tasks on the element. Other than that, the element on which the click event has to be attached is specified over here.

Onclick Event

The onclick event is similar to the jQuery click() method. Onclick event is also triggered and executed when the user clicks on the element selected.

For implementing this event, an onclick attribute is passed to the HTML element on which you want this event to be triggered. This attribute then takes a JavaScript function name that gets fired when the event is triggered.

Syntax:

<tag onclick="myFunction()"></tag>

Either this function can be declared over there itself, or it can be declared within the script tag as a JavaScript function.

The following example shows the implementation of .click() method and onclick event. Click on the given two boxes each and get to know which box represents which event.

jQuery code to demonstrate the implementation of .click() method and onclick event

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
      .divOne{
      height: 200px;
      width: 200px;
      background-color: cadetblue;
      border: 2px solid;
      text-align: center;
      font-size: x-large;
      font-weight: bolder;
      }
      .divTwo{
      height: 200px;
      width: 200px;
      background-color: coral;
      border: 2px solid;
      text-align: center;
      font-size: x-large;
      font-weight: bolder;
      }
    </style>
    <title>Document</title>
  </head>
  
  <body>
    <h2>jQuery.click() vs onClick</h2>
    <p>Click on the following boxes to know the difference between click() & onClick().</p>
    <hr>
    <div class="divOne"></div>
    <br>
    <div onclick="myFunction()" class="divTwo" id="myDiv"></div>
    <hr>
  </body>
  
  <script type="text/javascript">
    $(document).ready(function(){
    	$('.divOne').click(function(){
    		$(this).html('click()');
    	})  ;
    });
    function myFunction() {
    	document.getElementById("myDiv").innerHTML = "onClick()";
    };
  </script>
</html>

Output: