Understanding javascript eventPhase

When you click somewhere on a web page, the system will create a click event. You should realize that you are probably not clicking on single DOM node although you seem to click on one element like a button. You are actually clicking on a set of DOM nodes, which form a parent-child relationship. These DOM nodes share the same position that you are clicking on. But the event’s target is set to the most descendant DOM node.

Then the system will iterate over the set of DOM nodes, from the most antecedent node to the most descendant node. Each node maintains two event handler queues, one for capturing event handlers and the other for bubbling event handlers. You must know how to attach an event handler to an element using the addEventListener function.

function eventhandler(event)
{
   console.dir(event.eventPhase);
}
element.addEventListener('click',eventhandler,false);
element.addEventListener('click',eventhandler,true);

If the third parameter of addEventListener is set to true, the event handler is put into the capturing queue of the element. If the third parameter is set to false, the event handler is put into the bubbling queue of the element.

In this first iteration phase, or so-called event capturing phase, only the capturing queue of each node is looked at. If there are event handlers in the capturing queue, they are called. When calling an event handler, a parameter event is passed. If the current element is not the event’s target, event.eventPhase is set to 1(CAPTURING_PHASE). If the current element is the event’s target, event.eventPhase is set to 2(AT_TARGET).

Then, the second iteration over the set of nodes begins, this time, from the most descendant DOM node to the most antecedent node, i.e, in reverse order. The backward iteration is also called event bubbling phase. In this phase, only the bubbling queue of each node is inspected and if there are event handlers in those queues, they are called. The parameter of the event handling function event.eventPhase is set to 3(BUBBLING_PHASE) if current node is not event.target, or 2(AT_TARGET) if current node is the event.target.

You can bind the same function(event handler) to an element twice:one for the capturing phase and the other for the bubbling phase. This function will be called twice.

Did you like this?
Tip admin with Cryptocurrency