jQuery click() Method vs onClick Event
Last Updated :
22 May, 2023
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=
</script>
<style>
p {
display: block;
width: 200px;
padding: 25px;
font-size: 28px;
border: 3px solid green;
}
</style>
<script>
$(document).ready(function () {
$("p").click(function () {
alert("GfG is clicked using click() method");
});
});
</script>
</head>
<body>
<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=
</script>
<style>
p {
display: block;
width: 200px;
padding: 25px;
font-size: 28px;
border: 3px solid green;
}
</style>
</head>
<body>
<p onclick="gfgFunction()">
GeeksforGeeks!!!
</p>
<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=
</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>
<p id="para1" class="divOne">
Click Here!!!
</p>
<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.
|
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...