.off()S2C 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, 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 .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(eventObject)] )Unattach event handlers for the given event type(s), optionally passing a selector and/or a specific handler.
.off( events-obj [, selector] )Unattach an object of event type(s) and handlers, optionally passing a selector.

Parameters


Parameter Description Type
eventsA string containing one or more DOM event types or custom event names to unattach.
  • If the string 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
selectorA string containing a CSS or custom jQuery selector to filter the delegated events to unattach.Selector
handler(eventObject)A function to unattach, or the value false.Function
events-objAn object of key-value pair data of event type(s) and handlers to unattach.PlainObject

Return

A jQuery object.

.off( events [, selector] [, handler(eventObject)] ) Examplesgo to top of page Top

Unattach all event handlers for the given 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('** The JavaScript "mousedown" and "mousedup" events 
                               for "btn1" have been removed**');
  });

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

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 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('** The JavaScript "mousedown" event for "btn3" has been removed**');
  });

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

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 event type(s) passing a selector and/or 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('** The JavaScript "mouseup" event for "btn5" has been removed**');
  });

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

Press the button below to action the above code:

                     

We will show a message here for mouse button presses.


.off( events-obj [, selector] ) Examplego to top of page Top

Unattach an object 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 ponter 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('**"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 map 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 ponter 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 ponter is over the 'div2' element again you will see that mouseup JavaScript event does not fire anymore.


$(function(){
  $('#main').on({'mouseup.offns2': ourHandler9, 'mousedown.offns2': ourHandler10}, '#div2');
  $('#btn8').one('click', function(){
     $('#main').off({'mouseup.offns2': ourHandler9}, '#div2');
     $('#div2').append('**"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.

go to home page Homepage go to top of page Top