Read, With the Name of Your Lord Who Created

Javascript Event Phases: Capturing and Bubbling

Posted by triaslama on July 3, 2008

Events is something useful in programming world, because with events program can react based on user action. Javascript is no exception and I think one of Javascript strength is Events. There is many interesting things in Javascript events one of them are the Javascript event phases: Capturing and Bubbling.

Two Phases of Javascript Event: Capturing and Bubbling
Capturing phase is an event moving down the DOM tree to the element that instantiated event. Bubbling phase occuring after Capturing phase. Bubbling phase begins from the source of the event (e.g. button click) traverses up DOM tree to the root element.

Let’s see the following document structure:

<body>
<form>
<input type="button" />
</form>
</body>

When we click the button, the event captured by the document first, then <body> element, <form> element, and finally the <input type=”button” /> element (capturing phase). After that the event moves back, started from button element (button click event handler fired), <form>’s click, <body>’s click, and document click event handler fired (bubbling phase).

For the complete example try the following (evtphases.htm):

    <html>
    <head>
    <title>Javascript Event Phases</title>
    <script lang=”javascript” type=”text/javascript” src=”evt.js”></script>
    </head>
    <body>
    <form id=”frm” onclick=”frmClick()” >
    <input type=”button” id=”btn” value=”Button” onclick=”btnClick()” />
    </form>
    </body>
    </html>

 

The above HTML file references the following Javascript file (evt.js):

document.onclick = function()
{
	window.alert("Document clicked!");
};

function btnClick()
{
	window.alert("Button clicked!");
}

function frmClick()
{
	window.alert("Form clicked!");
}

 

Runs the code in the browser and click the button and see what happen. I run the code in my computer, I click the button element, and I get three alert box fired! first ‘Button clicked!’, second ‘Form clicked!’, and ‘Document clicked’ for third!

Well, I just click the button but the click event bubbling and traverses up the DOM tree started from button element, element, element, and finally up to document element.

How if I want to stop the event bubbling? Fortunately we can do that!

Canceling Event Bubbling
Every event object (depend on what the browser is) has the ability for canceling event bubbling. Events in W3C compliant browsers has a method named stopPropagation() to cancel event bubbling. Internet Explorer has cancelBubble propertiy, set the value of this property to true means cancel the event bubbling.

So just change our code for button element to the following:


<input type="button" id="btn" value="Button" onclick="btnClick(event)" />

Then modify btnClick event handler in Javascript file into the following:

function btnClick(e)
{
	if (window.event) {
		window.event.cancelBubble = true;
	}
	else {
		e.stopPropagation();
	}
	window.alert("Button clicked!");
}

 

Now refresh the page and click the button. I run it and only get one alert message (‘Button clicked!’). Yes, we have cancel the event bubbling and make the button as the last element that received the event!

2 Responses to “Javascript Event Phases: Capturing and Bubbling”

  1. Nice Article, I spend many time to understand “capture and bubbling” propagation issue. Now I am understand better this issue.

    Thank you
    Harun

  2. […] Above code is from: https://triaslama.wordpress.com/2008/07/03/javascript-event-phases-capturing-and-bubbling/ […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: