Search within TutorialsPark

Javascript : Event Flow

A guide to understanding the phases in the life cycle of an event.

Javascript Events : Event Flow (An Insight)

An Interesting question surfaced when the forth generation browser development teams met:

What part of the Webpage owns a specific event?

Answer : Consider a series of concentric circles(circles with same centre) drawn on piece of a paper, when a finger is placed on the centre, it is within not just one circle but all the circles.

This is how browser events work, when you click a button , you are not clicking just on the button but also the container and the entire page.

An event has three phases to its life cycle : cycle , target and bubbling

The order in which the events are recieved on the wepage are described by the event flow.

We will learn about each of these phases , how they work and how event listners can be used to get control of them.

Javascript Events : Event Bubbling

Event Flow Bubbling Phase

A stage in an event flow is called event bubbling if the event starts at the most specific element(the deepest possible node in the DOM) and then flows upward towards the least specific node(i.e the document)

When the element <div> is clicked , the click event takes place in the order as follows(refer to diagram above):

  1. <div>
  2. <body>
  3. <html>
  4. Document

The event click is first fired on the element <div> (the element clicked).

Then it moves up the DOM tree, firing on each node along it path till it reaches the document object.

Javascript Events : Event Capturing

Event Flow Capturing Phase

An alternative event flow model is called Event Capturing , first introduced by Netscape Browser.

According to this model, the least specific node recieves the event first and the most specific node should recieve the event last.

It is designed to intercept the event before it reaches the target

Referring to the previous example, clicking on the <div> element fires the click event in the following order.

  1. Document
  2. <body>
  3. <html>
  4. <div>

Event Capturing lacks browser support in modern browsers, hence users must use bubbling freely while using event capturing for special circumstances.

Javascript Events : DOM Event Flow

DOM2 Event Flow

The event flow model specified by DOM Level 2 Events has three phases to it:

  • Event Capturing Phase
  • At the target
  • Event Bubbling Phase.

First occurs Event Capturing, provided there exists an opportunity to intercept the event.

Then the actual target gets the event

Then it get to the final phase of bubbling, which allows a final response to the event.

Referring to the previous example, clicking the <div> element fires the event in the order as specified by the diagram above.

Javascript Events : The Capturing Phase

The event flow defined by DOM Level 2 events has three phases: capturing phase, at the target and event bubbling phase.

The first to happen is the Event Capturing, it provides an opportunity to intercept events if necessary.

Then the actual target recieves the event.

The Final phase is the bubbling, which allows a response to the event.

Example: Javascript DOM for Event Handling.

Give it a TRY! » Note: The function throwIt() is used instead of multiple if statements.

Javascript Events: Event Listeners

The DOM Level 2 Events define two methods which are used to assign and remove event handlers : addEventListeners() and removeEventListeners()

These methods exist on all DOM nodes and accept three arguments : the name of event to handle, the event handler function, and a Boolean value to denote whether to call the event handler i.e true and false

The Event listeners have a function similar to that of event handlers, the difference it that there is no limitation of the handler when assigning multiple function to the same DOM element and event.

In the demo below, the script uses the addEventListener method to register the handleMouseOver and handleMouseOut function as event handlers for the element p with the id value of content.

But when you click the button, the method removeEventListener disassociates the handleMouseOut function from the element p

Example: Javascript DOM : Event Handling using Inline Event

Give it a TRY! » Note: The onclick property is used to set up the handler for click event.

Table : Functions and Properties of Event Object.

Name Description Returns
type To specify the name of the event.(i.e click, mouseout) string
target The element at which the event is to be triggered HTMLElement
currentTarget Current element whose event listeners are currently being invoked. HTMLElement
eventPhase The phase in the life cycle of an event. number
bubbles A true value is returned if the event will bubble through the document, or else a false is returned. boolean
cancelable A true value is returned if the event has a default action that can be cancelled, otherwise a false is returned. boolean
timeStamp To denote the time at which the event was created, if no time is available then 0 is returned. string
stopPropogation() To cancel any further event capturing or event bubbling. Can be used if bubbles is true. void
stopImmediatePropogation() It cancels any further event capturing or event bubbling and prevents any other event handlers from being called. void
preventDefault() It prevents the browser from performing the default action associated with the event void
defaultPrevented A true value is returned if the preventDefault() has been called. boolean

Javascript Events Types.

The kind of event you are working with is defined using the property type , it accepts a string value eg: onclick, mouseover etc.

If you can fugure out the event you can use one function to handle multiple types. The demo below explains in detail.

In the below demo, the above example is done using Event handling function which is called when the event occurs.

Example: Javascript Events: Using a type Property.

Give it a TRY! » Note: The onclick property is used to set up the handler for click event.