How to attach a method to HTML element event using jQuery ?

Last Updated : 26 Jul, 2024

In this article, we are going to learn, how can we attach a method to an HTML element event using jQuery.

There are various events like click(), mouseenter(), mouseout(), etc which are available in jQuery. For attaching a method to an HTML elements event, we will need a jQuery method on(), which will help us to attach an event handler to the selected HTML.

on(): This method is used to attach event handlers to the currently selected HTML elements. On the event handler, we can add the method and perform tasks accordingly.

Syntax:

.on( <events> , "<selector>" , <method> )

Parameter:

event: It accepts one or more jquery events separated by space.
selector: It can accept the selector to filter out the children of the selected element, if the selector is not passed then it only works on the selected element.
method: With the help of the method, we can pass the data to the respective event when that event is fired.

CDN link: Add the given link below to the head tag of the HTML file to work with jQuery.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

Example 1: In this example, we will add a method to the HTML div with the help of the on() method, that will change the color of the text inside the div.

HTML

<!DOCTYPE html>
<html lang="en">
<head>   
    <title> Attaching method to HTML element</title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
   </script>

    <style>
        .box {
            height: 200px;
            width: 200px;
            border: 1px solid black;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>
<body>
    <div class="box">
        <h3>GeeksforGeeks</h3>
    </div>  

    <script>
        $(document).ready(function(){
            $(".box").on("click", function(){           
                $(".box").css("color", "green");    
            })
        });
    </script>
</body>
</html>

Output:

Example 2: In this example, we will attach a method to the div directly to its tag. We can call onmouseenter() event so that when the mouse will enter the HTML div, the size of the div and the size of the font will get smaller as well as the previous method will also work. When we click on the div, the color of the text will also be changed to green.