- Explaining the terms event, event flow, event handlers and event listeners
Events and event flow
The order in which the events are received on the web page is termed as event flow. The process of event flow is completed in 3 steps – event capturing (intercepting the event), event targeting (target gets the event) and event bubbling (response to the event).
<a href=”https://www.google.com” onClick=”alert(‘hello!”)”>Goolge</a>
<div id=”demo”> Press here.</div>
On clicking the element <div>, the event ‘click’ takes place in the following order:
The event ‘click’ fires the element <div>. Each node is subsequently fired along the DOM tree, upwards, until the object document is reached.
Event Capturing is an alternative model in event flow that was first introduced by Netscape Browser. As stated by this model, an event is received first by the least specific node and the most specific node or the most deeply nested element receives the event last. In this model, an event is intercepted before it reaches the actual target. However, unlike Event Bubbling, modern browsers lack support for this model and thus, Event Capturing can be used only in particular circumstances.
Referring to the example stated in the previous section, clicking the element <div> fires the event ‘click’ in the following order:
What happens in the Event Capturing Phase?
In the event capturing phase, the capturer listeners whose value is registered as “true”, are called. It is written in the following way:
el.addEventListener(‘Click’, listener, true)
Here an event is captured because the value of the listener is registered as “true”. In case there is no value, the default value is “false” with the outcome that the event does not get captured. Hence in this phase, only events with true value get called and are captured. In the subsequent target phase, all listeners that are registered are called, irrespective of whether their value is registered as true or false.
The DOM Level 2 specifies three stages to the model of event flow:
- Event Capturing Phase
- At the target
- Event Bubbling Phase
If there is an opportunity of intercepting the event, Event Capturing occurs first. This is followed by the actual target getting the event. Eventually, at the Event Bubbling Phase, The final response to the event takes place. Referring to the example stated in the previous section, clicking the element <div> fires the event ‘click’ in the order illustrated in the diagram above.
In the Event Bubbling Phase, only the events having flag value “false” (non-capturers) are called. Event Bubbling and Event Capturing are important aspects of DOM.
el.addEventListener(‘Click’, listener, false) // listener doesn’t capture
el.addEventListener(‘Click’, listener) // listener doesn’t capture
The above code exemplifies how the bubbling and the capturing phases work. Every event does not reach the target. Some events are not bubbled up and stop post the target phase. The bubbling event is not applicable in all kinds of events and the listener should have the Boolean property “.bubble” of the object of the event besides possessing some other properties such as – e.target (to reference the target of the event) and e.eventPhase (current listeners register on this mode).
If you’re interested to learn more about full stack, check out upGrad & IIIT-B’s PG Diploma in Full-stack Software Development which is designed for working professionals and offers 500+ hours of rigorous training, 9+ projects and assignments, IIIT-B Alumni status, practical hands-on capstone projects & job assistance with top firms.