The .bind() method will attach one or more event handlers to the selected elements then specifies a function to run at the time the event or events occur.

Event handlers are included in quotation marks inside the parentheses after .bind.

Event handlers include things like:

"click"

"mouseenter"

"mouseleave"

"submit"

"dblclick"

Here is an example of the .bind() method:

$('#talkBox').bind("mouseenter", function(){
    $(this).css({"background-color":"#884400", "color":"#ffffff"});
    $(this).html("You are here");
});

 

Using .bind() with multiple event handlers

You can combine several event handlers with the .bind() method.

You can have the function run for a number of events as shown below:

$('#talkBox').bind("click dblclick", function(){
    $(this).css({"background-color":"#884400", "color":"#ffffff"});
    $(this).html("You are here");
});

 You can bind several functions to different event handlers with the syntax shown below:

$('#talkBox').bind({
    "mouseenter": function(){
        $(this).css({"background-color":"#884400", "color":"#ffffff"});
        $(this).html("You are here");
    },
    "mouseleave": function(){
        $(this).css({"background-color":"#ffff77", "color":"#000"});
        $(this).html("You are gone");
    }
});