hide - Understanding jQuery

Event Capture
Even though the image was clicked, the image element is not the first to actually receive the
first event. Instead, the event is first processed by the document. In other words, the document
captures the event first. It then passes it to first div element, then to the second, and finally the
event arrives at its target, which is the image element. Each of the “ancestor” elements of the
target (img) receive the event and pass it on until the target element is reached. The target element
is defined by the original element that receives action first.
Event Bubbling
Bubbling is the reverse of capture. In this case, the target element that receives the action, such
as a mouse click, will process the event first using its event handler. Then, the event “bubbles”
up the DOM ancestor tree, all the way to document. Sort of like the bubbles in a glass of champagne.
Both event capture and bubbling happen behind the scenes, and many developers are not
aware that this is even happening while working with jQuery event functions. But this knowledge
is important because it is often the source of confusion when it comes to writing complex
script programs.
List of All jQuery Events
Your productivity as a jQuery developer will depend on how many event names you can recall
from your memory. The more events you commit to your memory, the less time you will
spend looking them up. Below is a table containing some of the jQuery events. You can see a
list of all jQuery events by going to the link below the table. I just didn’t want to clutter this email.
The link redirects to a page that can be printed out for your reference.
Event function Event description
.bind()
.blur()
.change()
.click()
.dblclick()
.delegate()
.die()
.error()
.focus()
.focusin()
.focusout()
.hover()
.on() and off()
Attach a function to an arbitrary event of your choice.
Attach “focus left a selected element” event.
Value of the selected input element has changed.
The selected element(s) has been clicked.
The selected element(s) has been double clicked.
Old function for .on(), use. on() instead.
Remove all events that were attached with .live()
Bind a handler to the “error” Javascript event
The selected element(s) received cursor focus
Detect focus of an input element nested inside an arbitrary parent (the selection)
Detect the loss of cursor focus of an input element nested inside a parent.
Mouse enters the area of an element.
New function equivalents to use instead of .bind() and .unbind()
For the full list of jQuery events refer to this page:
www.authenticsociety.com/jquery/list-all-jquery-events.html
98