A guide to understanding the phases in the life cycle of an event.
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.
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):
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.
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.
Event Capturing lacks browser support in modern browsers, hence users must use bubbling freely while using event capturing for special circumstances.
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.
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.
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
Table : Functions and Properties of Event Object.
|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|
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.