jQuery Event on() Method

The jQuery event on() method is used to bind one or more event handlers for the selected elements and any child element.

It can handle multiple events as well as namespace, and it works for both current elements and those elements that will be added in the future.

The jQuery on() method was introduced in jQuery version 1.7, and its providing an appropriate way to handle events that replaced older methods such as bind(), live(), and delegate().

Syntax

Following is the syntax of the jQuery event on() method −

$(selector).on(events, [selector], [data], handler)

Parameters

This method accepts four parameters named 'events', 'selector', 'data', and 'handler', which are described below −

events − One or more spece-separated event types such as 'click', 'submit', and optional namespace.
selector (optional) − A selector for the child elements.
data (optional) − An additional data pass to the function.
handler − The function to execute when the event occurs.

Return Value

This method does not have any return value.

Example 1

The following is the basic example of the jQuery event on() method −

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
</head>
<body>
    <p>Click on this paragraph.</p>
    <script>
        $('p').on("click", function(){
            alert("Clicked on paragraph");
        });
    </script>
</body>
</html>

Output

The above program displays a paragraph, when mouse pointer click on it a pop-up alert appears on the browser screen −

When mouse pointer clicks on the displayed paragraph −

Example 2

Binding the multiple events for the selected element.

Following is another example of the jQuery event on() method. We use this method to bind multiple events for the selected element that is div −

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
   <style>
    div{
        width: 300px;
        padding: 10px;
        transition: 0.5s;
        border-radius: 10px;
        font-size: 20px;
        font-weight: bold;
    }
   </style>
</head>
<body>
    <p>Mouseenter and mouseout on the below element.</p>
    <div>Tutorialspoint</div>
    <script>
        $('div').on({mouseenter: function(){
            $(this).css({"background-color": "green", "color": "white"});
        }, mouseout: function(){
            $(this).css({"background-color": "yellow", "color": "green"});
        }});
    </script>
</body>
</html>

Output

After executing the above program, a div element is displyed when mouse pointer enter or out the background will be changed accordingly −

Example 3

Passing data parameter value to the event handler function.

In the example below, we use the jQuery on() method to bind a "click" event for the button element, and display the data value when button is clicked −

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
    <style>
        button{
            background-color: green;
            color: white;
            width: 100px;
            padding: 10px;
            cursor: pointer;
        }
        span{
            color: green;
        }
    </style>
</head>
<body>
    <p>Click on the below button</p>
    <button>Click me!</button>
    <span></span>
    <script>
        $('button').on("click", {name: "Rahul"}, function(event){
            $('span').text(event.data.name + " is clicked the button");
        })
    </script>
</body>
</html>

Output

Once the above program is executed, a button will be displayed. When it is clicked, the data value passed will be displayed on the browser screen −

jquery_ref_events.htm

Print Page