In this article we will show you the solution of jQuery add event listener, here we are going to show you example with adding double click event listener using jquery.
As we know in jquery there more types of events and event handler methods.
So we can use any one event with handler method as per wish and those are familiar like javascript methods and events.
Step By Step Guide On jQuery Add Event Listener :-
Here we defined button ‘Double Click’ with id attribute for generates process.
In script block we defined ready() method which is automatically starts loading code of within this function when this program opened on browser.
There we used on() method with ‘dblclick’ event which is appends with button by using id so it will displays alert message when user double clicks on it.
<!DOCTYPE html>
<html>
<head>
<title>ADD EVENT LISTENER IN JQUERY</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn").on('dblclick',function(){
alert("Double Clicked");
});
})
</script>
</head>
<body>
<button id="btn">Double Click</button>
</body>
</html>- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is contain information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
- Here we imported open source jquery library support file which is needed for coding using jquery in program.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
- In script we defined ready() method within that we defined on() method with double click event which is referred by ‘dblclick’. Here we can specify any other event instead of ‘dblclick’.
- The on() method appends with button id attributes value ‘btn’ so it will happen when user double click on it then alert message will display for user verifications.
- In html block we defined button ‘Double Click’ with id attribute ‘btn’.
- Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
In conclusion now we are able to know how to add events listener on specific handler methods in jquery.
Before execution of program we needs to confirm internet connection because then only that jquery file will supports defined jquery codes without error.
When we executes program on browser we can see ‘Double Click’ button, now user needs to clicks on it two times at a time then alert message will display on alert box with the message ‘Double Clicked’ for users verification.
I hope this tutorial on jQuery add event listener helps you and the steps and method mentioned above are easy to follow and implement.
About Amruta
