1
<!DOCTYPE HTML>
<html>
<body>
<style type="text/css">
#a {background-color:blue;width:100px;height:200px;}
#b {background-color:red;margin-left:25px;width:50px;height:100px;}
</style> 
<div id="a">a
    <div id="b">b</div> 
</div>
<script>
document.getElementById("a").onclick = function() {console.log("A is clicked");} 
document.getElementById("b").onclick = function(event) {console.log("B is clicked");} 
document.onclick = function() {console.log("Document is clicked");} 
</script>
</body>
</html>

Above code is the demonstration of events bubbling.

Questions:

1.I know bubbling and capturing are two opposite phases. Can I understand this way? the nature of events is bubbling.

2.I did not see too many capturing examples online, so If I want to change above codes to events capturing, how to change?

user2507818
  • 2,719
  • 5
  • 21
  • 30
  • possible duplicate of http://stackoverflow.com/questions/4616694/what-is-event-bubbling-and-capturing – jeremy Jun 27 '13 at 11:45
  • its an duplicate of http://stackoverflow.com/questions/17339856/issue-with-event-bubbling-in-js – Hariharan Jun 27 '13 at 11:49
  • You can check this article http://censore.blogspot.in/2014/09/js-event-bubbling-vs-event-capturing.html – biplav Sep 16 '14 at 18:42

1 Answers1

0

To add a capturing then you need to use addEventListener to add the handlers

Note: Not supported below IE9

Ex:

document.getElementById("a").addEventListener('click', function(){}, true)

Demo: Fiddle

Arun P Johny
  • 384,651
  • 66
  • 527
  • 531