.off() JQ Home  <<  Events  <<  .off()

Event handler removal.

Description

The .off() method is used to remove event handlers for the given event type(s), optionally passing a selector.

  • The .off() method is used to remove an event handler attached using the .on() method.
    • If multiple filtering arguments are specified for removal, all of these must match the parameters of a previously attached event handler for it to be removed.
  • When a browser event name such as such as 'mouseover' is specified without any other parameters, all events of that type, both directly-bound and delegated, are removed from the elements in the jQuery set.
  • If the selector argument is specified then the delegated event handler matching it will be removed. The selector argument string specified must exactly match the one passed to the .on() method when the event handler was attached.
    • To remove all delegated Events from an element without removing directly-bound Events, use the special value '**'.
  • When jQuery attaches an event handler, a unique id is assigned to the handler function, therefore a handler can also be removed by specifying the function name in the handler argument. Handlers proxied by the jQuery.proxy() method or similar mechanisms will all have the same unique id. In this case passing 'proxied' handlers to the .off() method may remove more handlers than required. Adding 'namespaces' when attaching or removing event handlers gets around this issue and is a good practice to use anyway.
  • See the description for the .on() method for details of jQuery eventing.

Syntax

Signature Description
.off( events [, selector] [, handler] )Remove event handlers for the given String of event type(s), optionally passing a selector and/or handler.
.off( events [, selector] )Remove event handlers for the given PlainObject of event type(s), optionally passing a selector.
.off( event )Remove all event handlers of given event type from attached elements.
.off()Remove all event handlers from attached elements.

Parameters

Parameter Description Type
eventsA String or PlainObject containing one or more DOM event types or custom event names to unattach.
  • If the String or PlainObject used for eventType is not the name of a native DOM event, the handler is unattached from a previously created custom event.
  • 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 .off('anEventType.aNamespace', handler) could be used to unattach some events whilst not affecting events for .off('anEventType.aNamespace2', handler). In essence, namespacing allows us to action certain events for an eventType without affecting other events for that eventType.
String or PlainObject
selectorA string containing a CSS or custom jQuery selector to filter the delegated event to unattach which should match the one originally passed to .on() when attaching event handlers.String
handler (eventObject)A function to unattach, or the value false.Function
eventA jQuery.Event object to unattach.Event

Return

A jQuery object.

.off( events [, selector] [, handler] ) Examples Events  <<  Top

Unattach all event handlers for the given String of event type(s) ( direct event handler).

When we press the left button the mousedown and mouseup JavaScript events are fired and we output a message.

When we press the right button the first time, the click JavaScript event fires. When this event occurs we remove the mousedown and mouseup JavaScript event for 'btn1' and output a message. If you hit the left mouse button again you will see that all JavaScript event handlers do not fire anymore.


$(function(){
  $('#btn1').on('mousedown', ourHandler1);
  $('#btn1').on('mouseup', ourHandler2);
  $('#btn2').one('click', function(){
     $('#btn1').off('mousedown mouseup');
     $('#scrollspan1').append('** JavaScript "mousedown" and "mousedup" events for "btn1" removed **<br>');
  });

  function ourHandler1() {
    $('#scrollspan1').append('** JavaScript "mousedown" event triggered for button **<br>');
  }
  function ourHandler2() {
    $('#scrollspan1').append('** JavaScript "mouseup" event triggered for button **<br>');
  }
});

Press the button below to action the above code:

                     

We will show a message here for the mouse button presses.

Unattach event handlers for the given String of event type(s) passing a specific handler ( direct event handler).

When we press the left button the mousedown and mouseup JavaScript events are fired and we output a message.

When we press the right button the first time, the click JavaScript event fires. When this event occurs we remove the mousedown JavaScript event handler 'ourhandler3' from 'btn3' and output a message. If you hit the left mouse button again you will see that only the mouseup JavaScript event handler now fires.


$(function(){
  $('#btn3').on('mousedown', ourHandler3);
  $('#btn3').on('mouseup', ourHandler4);
  $('#btn4').one('click', function(){
     $('#btn3').off('mousedown', ourHandler3);
     $('#scrollspan2').append('** JavaScript "mousedown" event for "btn3" removed**<br>');
  });

  function ourHandler3() {
    $('#scrollspan2').append('** JavaScript "mousedown" event triggered for button **<br>');
  }
  function ourHandler4() {
    $('#scrollspan2').append('** JavaScript "mouseup" event triggered for button **<br>');
  }
});

Press the button below to action the above code:

                     

We will show a message here for the mouse button presses.

Unattach event handlers for the given String of event type(s) passing a selector and a specific handler ( delegated event handler).

When we press the left button the mousedown and mouseup JavaScript events are fired and we output a message.

When we press the right button the first time, the click JavaScript event fires. When this event occurs we remove the mouseup JavaScript event handler 'ourhandler6' from 'form' elements for our delegated 'btn5' and output a message. If you hit the left mouse button again you will see that only the mousedown JavaScript event handler now fires.


$(function(){
  $('form').on('mousedown', '#btn5', ourHandler5);
  $('form').on('mouseup', '#btn5', ourHandler6);
  $('#btn6').one('click', function(){
     $('form').off('mouseup', '#btn5', ourHandler6);
     $('#scrollspan3').append('** JavaScript "mouseup" event for "btn5" removed**<br>');
  });

  function ourHandler5() {
	    $('#scrollspan2').append('** JavaScript "mousedown" event triggered for button **<br>');
  }
  function ourHandler6() {
	    $('#scrollspan2').append('** JavaScript "mouseup" event triggered for button **<br>');
  }
});

Press the button below to action the above code:

                     

We will show a message here for mouse button presses.

.off( events [, selector] ) Examples Events  <<  Top

Unattach a PlainObject of event type(s) ( direct event handler).

In the example below when you press the left mouse button down or release the left mouse button while the pointer is over the 'div1' element the mousedown and mouseup JavaScript events fire.

When we press the button below the first time, the click JavaScript event fires. When this event occurs we remove the mousedown and mouseup JavaScript event for 'div1' and output a message. If you press the left mouse button down or release the left mouse button while the pointer is over the 'div1' element again you will see that all JavaScript event handlers do not fire anymore.


$(function(){
  $('#div1').on({'mouseup.offns1': ourHandler7, 'mousedown.offns1': ourHandler8});
  $('#btn7').one('click', function(){
     $('#div1').off({'mouseup.offns1': ourHandler7, 'mousedown.offns1': ourHandler8});
     $('#div1').append('<br>**"mouseup" and "mousedown" events removed for "div1. "');
  });

  function ourHandler7() {
    $(this).css({backgroundColor: 'orange', color: 'black'})
           .append('**mouseup "div1. "');
  }
  function ourHandler8() {
    $(this).css({backgroundColor: 'teal', color: 'white'})
           .append('**mousedown "div1. "');
  }
});

Some initial text.


Unattach a PlainObject of event type(s), passing a selector ( delegated event handler).

In the example below when you press the left mouse button down or release the left mouse button while the pointer is over the 'div2' element the mousedown and mouseup JavaScript events fire.

When we press the button below the first time, the click JavaScript event fires. When this event occurs we remove the mouseup JavaScript event for our delegated 'div2' and output a message. If you press the left mouse button down or release the left mouse button while the pointer is over the 'div2' element again you will see that mouseup JavaScript event does not fire anymore.


$(function(){
  $('.content').on({'mouseup.offns2': ourHandler9, 'mousedown.offns2': ourHandler10}, '#div2');
  $('#btn8').one('click', function(){
     $('.content').off({'mouseup.offns2': ourHandler9}, '#div2');
     $('#div2').append('<br>**"mouseup" event removed for "div2. "');
  });

  function ourHandler9() {
    $(this).css({backgroundColor: 'yellow', color: 'black'})
           .append('**mouseup "div2. "');
  }
  function ourHandler10() {
    $(this).css({backgroundColor: 'blue', color: 'white'})
           .append('**mousedown "div2. "');
  }
});

Some initial text.

.off( event ) Example Events  <<  Top

Remove all event handler of given event type from attached elements.

In the example below when you press the left mouse button down or release the left mouse button while the pointer is over the 'div3' or 'div4' elements the mousedown and mouseup JavaScript events fire.

When we press the button below the first time, the click JavaScript event fires. When this event occurs we remove the mousedown JavaScript event for 'div3' and 'div4' and output a message. If you press the left mouse button down or he left mouse button while the pointer is over the 'div3' or 'div4' elements again you will see that all JavaScript event handlers for the mousedown events do not fire anymore.


$(function(){
  $('#div3').on({'mouseup': ourHandler11, 'mousedown': ourHandler12});

  function ourHandler11() {
    $(this).css({backgroundColor: 'cyan', color: 'black'})
           .append('**mouseup "div3. "');
  }
  function ourHandler12() {
    $(this).css({backgroundColor: 'red', color: 'white'})
           .append('**mousedown "div3. "');
  }

  $('#div4').on({'mouseup': ourHandler13, 'mousedown': ourHandler14});
  function ourHandler13() {
    $(this).css({backgroundColor: 'green', color: 'black'})
           .append('**mouseup "div4. "');
  }
  function ourHandler14() {
    $(this).css({backgroundColor: 'olive', color: 'white'})
           .append('**mousedown "div4. "');
  }

  $('#btn9').one('click', function(){
     $('#div3, #div4').off('mousedown');
     $('#div3, #div4').append('<br>**"All "mousedown" events removed from "div2 and "div3.');
  });
});

Some initial text.

Some initial text.


.off() Example Events  <<  Top

Remove all event handler from attached elements.

When we press the button below the first time, the click JavaScript event fires. When this event occurs we remove all JavaScript event for '.content'. This effects 'div2' above and will remove all handlers present.

  • If the Using .off( events, selector ) button above has been pressed already this will remove the "mousedown" event.
  • If the Using .off( events, selector ) button above has not been pressed already this will remove the "mousedown" and "mouseup" events.

$(function(){
  $('#btn10').one('click', function(){
     $('.content').off();
  });
});


Related Tutorials

jQuery Advanced Tutorials - Lesson 4 - Event Handler Attachments