Support us .Net Basics C# SQL ASP.NET ADO.NET MVC Slides C# Programs Subscribe Buy DVD

Binding event handlers using jquery on method

Suggested Videos
Part 31 - jQuery event object
Part 32 - jQuery to detect which mouse button clicked
Part 33 - Binding event handlers in jquery

In this video we will discuss binding event handlers to events using on() method in jQuery

In Part 33 of jQuery Tutorial, we discussed how to bind event handlers using bind() method. If you are using jQuery 1.7 or higher, you should be using on() and off() methods instead of bind() and unbind() methods.

The syntax for using on() and off() methods is very similar to using bind() and unbind() methods. The following example is the same example we worked with in Part 33. Instead of using bind() and unbind() we are using on() and off() methods.

        .ButtonStyle {
            background-color: red;
            cursor: pointer;
            font-weight: bold;
            color: white;
    <script src="jquery-1.11.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#btnClickMe').on('click mouseover mouseout', function (event) {
                if (event.type == 'click') {
                    $('#divResult').html('Button Clicked at ' + 'X = '
                        + event.pageX + ' Y = ' + event.pageY);
                else if (event.type == 'mouseover') {
                else {

            $('#btnEnableMouseOverEffect').click(function () {
                $('#btnClickMe').on('mouseover', function () {

            $('#btnDisableMouseOverEffect').click(function () {
<body style="font-family:Arial">
    <input id="btnClickMe" type="button" value="Click Me" />
    <input id="btnEnableMouseOverEffect" type="button"
           value="Enable Mouse Over Effect" />
    <input id="btnDisableMouseOverEffect" type="button"
           value="Disable Mouse Over Effect" />
    <br /><br />
    <div id="divResult"></div>

In the example above we are binding a single anonymous function as the event handler for all the 3 events
1. click
2. mouseover
3. mouseout

If you want to bind a different anonymous function, you could do so using the following syntax.
    click: function (event) {
        $('#divResult').html('Button clicked at X = '
            + event.pageX + ' Y = ' + event.pageY);
    mouseover: function () {
    mouseout: function () {

jQuery shorthand functions (.click, .mouseover, .mouseout etc.) call on() method behind the scenes.

So far in this video series we have seen 3 different ways of binding event handlers in jQuery
1. Using jQuery shorthand functions (.click, .mouseover, .mouseout etc.) () { ... });

2. With jQuery version < 1.7, bind() method can be used
element.bind('click', function () { ... });

3. With jQuery version 1.7 or higher, on() method can be used. 
element.on('click', function () { ... });

According to, as of jQuery 1.7, the .on() method is the preferred method for attaching event handlers.

jQuery tutorial for beginners

No comments:

Post a Comment

If you like this website, please share with your friends on facebook and Google+ and recommend us on google using the g+1 button on the top right hand corner.