Simultaneously add Multiple Event Handlers to a Selector using jQuery 1.4

With jQuery 1.4, you can add multiple event handlers to a selector by passing a map of event type/handler pairs as shown below:

<html>
    <head>
    <title>Bind Multiple Event Handlers</title>
        <style type="text/css">
        .divOne{
            height:40px;
            width:100px;
            background-color:#808080;
        }
        </style>
        <script language="javascript" type="text/javascript"
       src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js">
        </script>
        <script language="javascript" type="text/javascript">
            $(function() {
                $('.divOne').bind({
                    mouseenter: function() {
                        $(this).css("background-color", "#f0f0f0");
                    },
                    mouseout: function() {
                        $(this).css("background-color", "#808080");
                    },
                    click: function() {
                        alert("Div was clicked");
                    }
                });
            });             
        </script>   
    </head>
    <body>
    <form>
       <div class="divOne">
       </div>
     </form>
    </body>
</html>

See a Live Demo

Note: In the previous version, you could bind one function to multiple events.

1 comment: