.bind()    **DEPRECATED** JQ Home  <<  Events  <<  .bind()

Bind event handler.

Description

The .bind() method is used to bind an event handler to the specified elements.

  • The .bind() method attaches an event handler directly to the elements that are currently selected in the jQuery object, therefore the elements must exist when the call to the .bind() method happens.
  • Starting with jQuery version 1.7 more flexible event binding can be achieved using the .on() method. The .on() method allows us to attach event handlers directly to a document and is the preferred method to use when using this version onwards.
  • When an event reaches an element, all handlers bound to that event type for the element are fired. If multiple handlers are registered for the element, they will always execute in the order in which they were bound. When all handlers have finished executing, the event continues along the normal event propagation path.

This method was deprecated in jQuery 3.0.

Syntax

Signature Description
.bind( eventType [eventData ,] handler(eventObject) )Bind an event handler to specified event type(s), optionally passing an object of data.
.bind( eventType [, eventData], preventBubble )Bind an event handler to specified event type(s) with or without bubbling, optionally passing a map of data.
.bind( events )Bind a specified map of event type(s) and functions to execute for them.

Parameters

Parameter Description Type
eventTypeA string containing one or more DOM event types or custom event names.
  • If the string used for eventType is not the name of a native DOM event, the handler is bound to a custom event. Custom events are never called by the browser, but can be triggered manually from other JavaScript code using the .trigger()) or .triggerHandler() methods.
  • If a period (.) character is present anywhere in the eventType string, then that event becomes namespaced. The characters before the period (.) character represent the eventType, whilst the characters after the period (.) character represent the namespace. As an example .bind('anEventType.aNamespace', handler) could be used to handle some events whilst not affecting events for .bind('anEventType.aNamespace2', handler). In essence, namespacing allows us to action certain events for an eventType without affecting other events for that eventType.
String
eventDataAn object of data to pass to the event handler.Object
handler( eventObject )A function to execute each time the event is triggered.Function
preventBubbleA boolean value:
  • true - Event bubbling will occur (default)
  • false - Attaches a function that prevents the default action from occurring and stops the event from bubbling.
Boolean
eventDataAn object containing one or more DOM event type(s) and functions to execute for them.Anything

Return

A jQuery object.

.bind( eventType [,eventData], handler(eventObject) ) Example  Events  <<  Top

Bind an event handler to specified event type(s), optionally passing an object of data.

In the example below when we press the left button, we fire off the event handler we bound to 'btn1' for the click JavaScript event and turn the background colour of this button to yellow.

When we press the right button we run the event handler we bound to 'btn2' for the click JavaScript event which fires off the addText function.

What we are doing here is passing across the event object to the function addText(event). The map we specify, in our case { param1: '#scrollspan1', param2: 'click ', param3: '**JavaScript event triggered** ' } gets tagged onto the event.data property. We then access this parameter in the function via event.data.param and use it as part of the appended data.


$(function(){
  $('#btn1').bind('click', function() {
    $(this).css('backgroundColor', 'yellow');
  });
  $('#btn2').bind('click', { param1: '#scrollspan1', param2: 'click was bound ', 
                             param3: '**JavaScript event triggered**  ' }, addText);

  function addText(event) {
    $(event.data.param1).append( event.data.param2 + '<code>' + event.data.param3+ '</code>');
  }
});

Press the button below to action the above code:

             

We will show a message here.

.bind( eventType [, eventData], preventBubble ) Example  Events  <<  Top

Bind an event handler to specified event type(s) with or without bubbling, optionally passing a map of data.

In the example below when we press the button nothing happens as we are preventing event bubbling by using the preventBubble boolean argument. This is equivalent to typing in function(){ return false; }. This function can be removed at a later time by calling: .unbind( eventName, false ).


$(function(){
  $('#btn3').bind('click', false);
});

Press the button below to action the above code:

.bind( events ) Example  Events  <<  Top

Bind an event handler to a specified object of event type(s) and functions to execute for them.

In the example below we pass a bind a map of event types and actions to perform when they are fired.

When we press the button with an id of 'btn4'' the click JavaScript event fires and turns the background colour of this button to orange. When we move the mouse away from this button we fire off the mouseleave JavaScript event which in our case appends some text to a paragraph.


$(function(){
  $('#btn4').bind({
     click: function() {
       $(this).css('backgroundColor', 'orange');
     },
     mouseleave: function() {
       $('#scrollspan2').append('  leaving "btn4"  ');
     }
  });
});

Press the button below to action the above code:

We will show a message here.

Related Tutorials

jQuery Advanced Tutorials - Lesson 4 - Event Handler Attachments