Group Multiple Function in Jquery

In this post, I will show you a simple jQuery tip to group multiple function on single element or multiple element using jQuery. For example, you need to define 3 functions click, mouseover and mouseout on any element.

jQuery supports binding functions so that they all can be defined within the same group. This is useful in keep your code tidy. Below code snippets shows how to group multiple function in jQuery.
$('#foo').bind({
  click: function() {
        // do something
 },
  mouseover: function() {
    // do something
 },
  mouseout: function() {
        // do something
 }
})
For demo, I have placed a div and binded 3 different function (click,mouseover and mouseout) on div element together. On click, I am showing an alert box and on mouseover and mouseout, changing the forecolor of the div text using css.
$(document).ready(function(){
  $('#dvText').bind({
     click: function() {
        alert('Click event');
     },
     mouseover: function() {
        $(this).css("color", "Red");
     },
     mouseout: function() {
        $(this).css("color", "Black");
     }
  })
});
See live Demo and Code.
Feel free to contact me for any help related to jQuery. I will gladly help you.
SHARE

Nothing shocks me, I'm a Software Engineer. And I am not young enough to know everything. I live in World Wide Web and from there take care of this website. This website communicates about my work, learning and experience. I believe life is short, and it is for loving, sharing, learning and connecting. So lets connect..