Event Bubbling Vs. Event Capturing

Event is an action from user or program detected by the program. They are responsible for interaction of JavaScript with HTML web pages. Events can be subscribed by listeners that occurs only when the particular event can be fired. When an event occurs in an element inside another element, and both elements have registered a handle for that event. If there are three elements FORM, DIV and PARAGRAPH. DIV element placed inside the FORM element. PARAGRAPH is inside DIV and we attach an event handler with both the elements lets say onClick . Now when we click on PARAGRAPH then eventHandler for all three elements will be executed. Now here the question is in which order the event will execute. If the event attached with PARAGRAPH executes first this is called Event Bubbling and if the event attached with FORM executes first it is called Event Capturing. As per W3C the event will start in the capturing phase until it reaches the target comes back to the element and then it starts bubbling .

Event Bubbling

With bubbling , the event is first captured and handled by the innermost element and then propagated to outer elements. Only certain events can bubble. Events that do bubble have this property set to true. You can use this property to check if an event is allowed to bubble or not. At present, all the modern browsers have event bubbling as the default way of event flow.
run this source code Browser View
FORM
DIV

P

Click anywhere inside Div

Source
<form onclick="alert('Event from form')" style="border: 2px solid blue;width:200px ; ">FORM <div onclick="alert('Event from div')" style="border: 2px solid green;width:150px ; ">DIV <p onclick="alert('Event from p')" style="border: 2px solid red; width:100px; ">P</p> </div> </form>

Event Capturing

Event Capturing is the event starts from top element to target element. Modern browser doesn't support event capturing by default but we can achieve that by code in JavaScript.




Related Topics
  1. JavaScript Interview Questions (Part2)
  2. JavaScript Interview Questions (Part3)
  3. Is JavaScript a true OOP language?
  4. Advantages and Disadvantages of JavaScript
  5. Difference Between JavaScript and ECMAScript?
  6. What is noscript tag?
  7. Escaping Special Characters in JavaScript
  8. What is undefined x 1 in JavaScript?
  9. JavaScript : Logical Operators
  10. Difference between '=', '==' and '===' operators?
  11. How to reload a page using JavaScript?
  12. How to write html code dynamically using JavaScript?
  13. How to add html elements dynamically with JavaScript?
  14. How to load another html page from javascript?
  15. What Is The Disadvantages Using InnerHTML In JavaScript?
  16. What is Browser Object Model
  17. How to detect the OS on the client machine in JavaScript?
  18. Difference between window, document, and screen in Javascript?
  19. Difference between the substr() and substring() in JavaScript?
  20. How to replace all occurrences of a string in JavaScript?
  21. How to test a string as a literal and as an object ?
  22. What is Associative Array? How do we use it?
  23. What is an anonymous function in JavaScript?
  24. What is the use of 'bind' method in JavaScript?
  25. Pure functions Vs. Impure functions in javascript
  26. Is Javascript a Functional Programming Language?
  27. What's the Difference Between Class and Prototypal Inheritance?
  28. Javascript, Pass by Value or Pass by Reference?
  29. How to prevent modification of an object in Javascript?
  30. What is 'this' keyword in JavaScript?
  31. How Does Function Hoisting Work in JavaScript?
  32. What do mean by NULL in Javascript?
  33. What does the delete operator do in JavaScript?
  34. What is the Infinity property used for in Javascript?
  35. What is "strict mode" and how is it used in JavaScript?
  36. What is the difference between .call() and .apply()?
  37. Entire content of a JavaScript source file in a function block?
  38. What is an immediately-invoked function expression?
  39. What is escape & unescape String functions in JavaScript?
  40. What is the instanceof operator in JavaScript?
  41. What Are RESTful (REpresentational State Transfer)Web Services?
  42. What is Unobtrusive JavaScript & Why it's Important?
  43. What Does JavaScript Void(0) Mean?
  44. What are JavaScript Cookies?
  45. Difference between Client side JavaScript and Server side JavaScript
  46. TypeError: document.getelementbyid(...) is null
  47. Uncaught TypeError: Cannot read property of undefined In JavaScript
  48. What's the difference between Null and Undefined?