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

Delegate event handler.

Description

The .delegate() method is used to henceforth, attach an event handler to all elements matching the specified selector for the given event type(s), based upon a specific set of root elements.

  • Starting with jQuery version 1.7 more flexible event delegation 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.
  • To remove events attached with the delegate() method, see the .undelegate() method.

This method was deprecated in jQuery 3.0.

Syntax

Signature Description
.delegate( selector, eventType, handler(eventObject) )Henceforth, attach an event handler to all elements matching the specified selector for the given event type(s).
.delegate( selector, eventType, eventData, handler(eventObject) )Henceforth, attach an event handler to all elements matching the specified selector for the given event type(s), passing an object of data.
.delegate(selector, events )Henceforth, attach a map of event type(s) and functions to execute for them, for the specified selector.

Parameters

Parameter Description Type
selectorA string containing a CSS or custom jQuery selector to filter the elements that trigger the events.String
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 .delegate ('anEventType.aNamespace', handler) could be used to handle some events whilst not affecting events for .delegate ('anEventType.aNamespace2', handler). In essence, namespacing allows us to action certain events for an eventType without affecting other events for that eventType.
String
handler( eventObject )A function to execute each time the event is triggered.Function
eventDataAn object of data to pass to the event handler.Anything
eventsA plain object of event type(s) and functions to execute for them.PlainObject

Return

A jQuery object.

.delegate(selector, eventType, handler(eventObject)) Example  Events  <<  Top

Henceforth, attach an event handler to all elements matching the specified selector for the given event type(s).

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


$(function(){
  $('.content').delegate('#btn5', 'click', function() {
    $(this).css('backgroundColor', 'yellow');
  });
});

Press the button below to action the above code:

.delegate( selector, eventType, eventData, handler(eventObject) ) Example  Events  <<  Top

Henceforth, attach an event handler to all elements matching the specified selector for the given event type(s), passing an object of data.

In the example below when we press the button we fire off the the event handler we attached to 'btn7' 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(){
  $('form').delegate('#btn6', 'click', 
                     { param1: '#scrollspan3', param2: 'click was attached from delegate', 
                       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.

.delegate( selector, events ) Example  Events  <<  Top

Henceforth, attach a map of event type(s) and functions to execute for them for the specified selector.

In the example below we attach an object of event types and actions to perform when they are fired.

When we press the button with an id of 'btn7'' 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(){
  $('.content').delegate('#btn7', {
     click: function() {
       $(this).css('backgroundColor', 'orange');
     },
     mouseleave: function() {
       $('#scrollspan2').append('  leaving "btn7"  ');
     }
  });
});

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