JQuery click() Method vs onClick Event - Coding

jQuery is the JavaScript library known for its lightweight, fast, and cross-platform features. It is an open-source library that goes by the motto “Write less, do more”. The main objective of jQuery is to make Java script so easy that one can create more attractive and interactive websites. jQuery has multiple events like jQuery onClick(), jQuery click(), etc. The jQuery.click() is a built-in jQuery method that can initiate the click event and the jQuery.onClick is a built-in jQuery event that shares similarities with jQuery.click() method. In this article, we will see both click() function & onClick() event attribute in jQuery, along with knowing the difference between them & their implementation through the examples.

click() method: This is a built-in jQuery method that can initiate the click event. If a certain element is clicked on the web page, it triggers the click() method, which initiates the occurrence of a click event. Also, if any function is attached to the click() method, it too gets fired. We can perform various tasks related to elements using the click() method.

Syntax: The jQuery click() method can have two forms,

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

Parameter: The jQuey click() method only accepts one optional parameter “function”, which specifies the function to trigger when a click event occurs.

Example 1: This example illustrates the basic usage of the click() function in jQuery.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
    </script> 
  
    <style> 
        p { 
            display: block; 
            width: 200px; 
            padding: 25px; 
            font-size: 28px; 
            border: 3px solid green; 
        } 
    </style> 
  
    <script> 
  
        <!-- jQuery code to show the working of click() method -->
        $(document).ready(function () { 
            $("p").click(function () { 
                alert("GfG is clicked using click() method"); 
            }); 
        }); 
    </script> 
</head> 
  
<body> 
  
    <!-- click on this block and 
        alert will be displayed -->
    <p>GeeksforGeeks!!!</p> 
</body> 
  
</html>

Output: The above example shows the workings of the jQuey click() method. When the GeeksforGeeks block is clicked, the function is triggered and throws an alert.

jQuery.click() method

onClick Event Attribute: The onClick is a built-in jQuery event that shares similarities with jQuery.click() method. When a certain selected element is clicked, the onClick event triggers and executes. If any function is passed as an attribute to the onClick event, then that will also be executed. In order to use the onClick event on an HTML element, just pass an onClick attribute to that specific element. The attribute will be a Javascript function that will be fired when an event is triggered.

Syntax:

<element onclick = "onClickFunction()"> </element>

Attribute Value: The “onclick” attribute will accept a single value of script (like functions) that will be triggered when an element is clicked.

Note: Almost every HTML tag supports the onclick attribute except some like <html>, <head>, <br>, <meta>, etc.

Example 2: This example illustrates the basic usage of the onClick Event Attribute in jQuery.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
    </script> 
    <style> 
        p { 
            display: block; 
            width: 200px; 
            padding: 25px; 
            font-size: 28px; 
            border: 3px solid green; 
        } 
    </style> 
</head> 
  
<body> 
    
    <!-- click on this block and 
        alert will be displayed -->
    <p onclick="gfgFunction()"> 
        GeeksforGeeks!!! 
    </p> 
    
    <!-- jQuery code to show the working of onClick event -->
  
    <script> 
  
        /* Declaring gfgFunction which will throw alert */ 
        function gfgFunction() { 
            return alert("GfG is clicked using onClick event") 
        }; 
    </script> 
</body> 
  
</html>

Output:

jQuery onClick Event

Example 3: This example illustrates the implementation of the jQuery.click() method and the jQuery onclick event.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
    </script> 
  
    <style> 
        .divOne { 
            display: block; 
            width: 250px; 
            padding: 25px; 
            font-size: 28px; 
            border: 3px solid green; 
        } 
  
        .divTwo { 
            display: block; 
            width: 250px; 
            padding: 25px; 
            font-size: 28px; 
            border: 3px solid green; 
        } 
    </style> 
</head> 
  
<body> 
  
    <!-- click on this blocks and 
        their inner text will be change -->
    <p id="para1" class="divOne"> 
        Click Here!!! 
    </p> 
    <!--Use of onclick event-->
    <p id="para2" class="divTwo" 
        onclick="gfgFunction()"> 
        Click Here!!! 
    </p> 
  
    <script> 
  
        // jQuery code to show the working of jQuery  
        // click() method and onClick event 
        $(document).ready(function () { 
            $("p").click(function () { 
                document.getElementById("para1") 
                    .innerHTML = "jQuery click() method"; 
            }); 
        }); 
  
        function gfgFunction() { 
            return document.getElementById("para2") 
                .innerHTML = "jQuery onclick Event"; 
        }; 
    </script> 
</body> 
  
</html> 

Output:

jQuery.click() vs onClick

Difference between jQuery click() Function vs onClick() Event Attribute:

	click() Function	onClick Event Attribute
1	Click() is an inbuilt jQuery method.	The onclick is an inbuilt jQuery event.
2	jQuery click() method can initiate the click event. If a certain element is clicked on the web page, it triggers the click() method, which initiates the occurrence of a click event. Also, if any function is attached to the click() method, it too gets fired.	When a certain selected element is clicked, the onClick event triggers and executes. If any function is passed as an attribute to the onClick event, then that will also be executed
3	The click() method is not supported by HTML tags.	The onclick attribute is supported by many HTML tags.
4	The click() method is based on the standard event registration model. Hence, it is more preferable.	The onclick event is not based on the standard event registration model, its use is limited.

Reffered: https://www.geeksforgeeks.org

JQuery

Related
jQWidgets jqxComboBox renderSelectedItem Property
How to Define Multiple CSS Attributes in jQuery ?
jQWidgets jqxComboBox valueMember Property
How to convert form data to JavaScript object with jQuery ?
jQWidgets jqxChart toolTipFormatFunction Property

Type:	Geek
Category:	Coding
Sub Category:	Tutorial
Uploaded by:	Admin
Views:	16