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

Binding event handlers in jquery

Suggested Videos
Part 30 - jQuery mouse events
Part 31 - jQuery event object
Part 32 - jQuery to detect which mouse button clicked



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



One way to bind event handlers to events is by using the jQuery shorthand functions like .click, .mouseover etc. Bind method is another way of doing the same.

The following example binds click event handler to the button - btnClickMe
$('#btnClickMe').bind('click', function () {
    $('#divResult').html('Button Clicked');
});

Binds multiple event handlers to the button - btnClickMe. If required, the event object can also be passed to the event handler method, although it is optional.
$('#btnClickMe').bind('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') {
        $(this).addClass('ButtonStyle');
    }
    else {
        $(this).removeClass('ButtonStyle');
    }
});

Use the unbind() method to unbind the event handler
$('#btnClickMe').unbind('mouseover');

To unbind all the event handlers of an element, use unbind() method without any parameters
$('#btnClickMe').unbind();

Please note: If you are using jQuery 1.7 or higher, you should be using on() and off() methods instead of bind() and unbind() methods. We will discuss on() and off() methods in our next video.

Complete Example : 
binding event handlers in jquery

<html>
<head>
    <title></title>
    <style>
        .ButtonStyle {
            background-color: red;
            cursor: pointer;
            font-weight: bold;
            color: white;
        }
    </style>
    <script src="jquery-1.11.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#btnClickMe').bind('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') {
                    $(this).addClass('ButtonStyle');
                }
                else {
                    $(this).removeClass('ButtonStyle');
                }
            });

            $('#btnEnableMouseOverEffect').click(function () {
                $('#btnClickMe').bind('mouseover', function () {
                    $(this).addClass('ButtonStyle');
                });
            });

            $('#btnDisableMouseOverEffect').click(function () {
                $('#btnClickMe').unbind('mouseover');
            });
        });
    </script>
</head>
<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>
</body>
</html>

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.