?
Solved

useCapture Javascript - explanation

Posted on 2009-04-03
2
Medium Priority
?
702 Views
Last Modified: 2012-05-06
Hi,

I'm just wondering if somone can explain the use of useCapture in Javascript and give a simple example:

useCapture: Boolean indicating whether to bind the event as it is propogating towards the target node, (event Capture), or as the event bubbles upwards from the target (event bubble). Set to true or false, respectively.
(ref. http://www.javascriptkit.com/domref/elementmethods.shtml)

I'm not certain what is means when it states "to bind the event as it is propogating towards the target node". What is propogating? Can you give a simple example.

And the statement "as the event bubbles upwards from the target (event bubble)". What does this mean? What does it mean by "event bubbles upwards"? Please a small example.

I find examples help with understanding and clarity. So it would be good to just illustrate it with a simple example.

Thank you very much,
vkimura


0
Comment
Question by:Victor Kimura
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 5

Accepted Solution

by:
niko86 earned 2000 total points
ID: 24066014
the mozilla dom reference states:
If true, useCapture indicates that the user wishes to initiate capture. After initiating capture, all events of the specified type will be dispatched to the registered listener before being dispatched to any EventTargets beneath it in the DOM tree. Events which are bubbling upward through the tree will not trigger a listener designated to use capture. See DOM Level 3 Events for a detailed explanation.

more info:
http://www.w3.org/TR/DOM-Level-3-Events/events.html#Events-flow

in short terms, useCapture prevents events from being triggered during the target and bubbling phases.
it will only trigger in the capture phase
<html>
 <head>
   <title>DOM Event Example</title>
   <style type="text/css">
     #t { border: 1px solid red }
     #t1 { background-color: pink; }
   </style>
   <script type="text/javascript">
 
   // Function to change the content of t2
   function modifyText() {
     var t2 = document.getElementById("t2");
     t2.firstChild.nodeValue = "three";    
   }
 
   // Function to add event listener to t
   function load() { 
     var el = document.getElementById("t"); 
     el.addEventListener("click", modifyText, false); 
   } 
 
   </script> 
 </head> 
 <body onload="load();"> 
 <table id="t"> 
   <tr><td id="t1">one</td></tr> 
   <tr><td id="t2">two</td></tr> 
 </table> 
 </body> 
 </html> 

Open in new window

0
 

Author Closing Comment

by:Victor Kimura
ID: 31566516
Hi niko86,

Okay, I think I'm beginning to understand. Thank you.

vkimura
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction HyperText Transfer Protocol (http://www.ietf.org/rfc/rfc2616.txt) or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

801 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question