jQuery internally handles events via the addEventListener function. This means it is perfectly legal to have more than one function bound to the same event for the same DOM element.
Attach and Detach Event Handlers
Attach an Event Handler
Since version 1.7 jQuery has the event API
.on() gives you more options.
Detach an Event Handler
Naturally you have the possibility to detach events from your jQuery objects too. You do so by using
.off( events [, selector ] [, handler ] ).
When clicking the button
$(this) will refer to the current jQuery object and will remove all attached event handlers from it. You can also specify which event handler should be removed.
In this case the
mouseenter event will still function after clicking.
Let's start with example. Here is a very simple example HTML.
Now in this example, we want to add an event listener to all
The problem is that the list in this example is dynamic.
<li> elements are added and removed as time passes by.
However, the page does not refresh between changes, which would allow us to use simple click event listeners to the link objects (i.e.
The problem we have is how to add events to the
<a> elements that come and go.
Background information - Event propagation
Delegated events are only possible because of event propagation (often called event bubbling). Any time an event is fired, it will bubble all the way up (to the document root). They delegate the handling of an event to a non-changing ancestor element, hence the name "delegated" events.
So in example above, clicking
<a> element link will trigger 'click' event in these elements in this order:
- document root
Knowing what event bubbling does, we can catch one of the wanted events which are propagating up through our HTML.
A good place for catching it in this example is the
<ul> element, as that element does is not dynamic:
- We have 'ul' which is the recipient of this event listener
- The first parameter ('click') defines which events we are trying to detect.
- The second parameter ('a') is used to declare where the event needs to originate from (of all child elements under this event listener's recipient, ul).
- Lastly, the third parameter is the code that is run if first and second parameters' requirements are fulfilled.
In detail how solution works
- User clicks
- That triggers click event on
- The event start bubbling up towards document root.
- The event bubbles first to the
<li>element and then to the
- The event listener is run as the
<ul>element has the event listener attached.
- The event listener first detects the triggering event. The bubbling event is 'click' and the listener has 'click', it is a pass.
- The listener checks tries to match the second parameter ('a') to each item in the bubble chain. As the last item in the chain is an 'a' this matches the filter and this is a pass too.
- The code in third parameter is run using the matched item as it's
this. If the function does not include a call to
stopPropagation(), the event will continue propagating upwards towards the root (
Note: If a suitable non-changing ancestor is not available/convenient, you should use
document. As a habit do not use
'body' for the following reasons:
bodyhas a bug, to do with styling, that can mean mouse events do not bubble to it. This is browser dependant and can happen when the calculated body height is 0 (e.g. when all child elements have absolute positions). Mouse events always bubble to
documentalways exists to your script, so you can attach delegated handlers to
documentoutside of a DOM-ready handler and be certain they will still work.
Document Loading Event .load()
If you want your script to wait until a certain resource was loaded, such as an image or a PDF you can use
.load(), which is a shortcut for shortcut for
.on( "load", handler).
Events for repeating elements without using ID's
There is a series of repeating elements in page that you need to know which one an event occurred on to do something with that specific instance.
- Give all common elements a common class
- Apply event listener to a class.
thisinside event handler is the matching selector element the event occurred on
- Traverse to outer most repeating container for that instance by starting at
find()within that container to isolate other elements specific to that instance
Sometimes there will be properties that aren't available in jQuery event. To access the underlying properties use
Get Scroll Direction
Switching specific events on and off via jQuery. (Named Listeners)
Sometimes you want to switch off all previously registered listeners.
An issue with this method is that ALL listeners binded on
document by other plugins etc would also be removed.
More often than not, we want to detach all listeners attached only by us.
To achieve this, we can bind named listeners as,
This ensures that any other click listener is not inadvertently modified.