Tracking event propagation with bubble and capture handlers

 

<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){

            $(function(){
                $('*').each(function(){
                    var current = this;
                    this.addEventListener('click',function(event) {
                      say(current.tagName + '#'+ current.id + ' target is ' + event.target.id);
                    },true);
                    this.addEventListener('click',function(event) {
                      say(current.tagName + '#'+ current.id + ' target is ' + event.target.id);
                    },false);
                });
            });
            function say(text) {
            $('#console').append('<div>'+text+'</div>');
            }
        });
    </script>
<style>

  div { margin:3px; width:50px; position:absolute;
        height:50px; left:10px; top:30px; 
        background-color:yellow; }
  div.red { background-color:red; }
  
</style>
  </head>
  <body>
    <body>
        <div id="a">
        <div id="b">
        <img id="c" src="my.jpg"/>
        </div>
        </div>
        <div id="console"></div>
    </body>
</html>

Related examples in the same category

1.	Cancel only the default action by using the preventDefault method
2.	Get click event coordinates
3.	Get event target
4.	Cancel a default action and prevent it from bubbling up
5.	Get tag name from event target
6.	Prevent default event
7.	Removes a bound live event
8.	Event instance properties
9.	Define custom event
10.	Stop only an event from bubbling by using the stopPropagation method.
11.	Pass some extra data before the event handler:
12.	To cancel only the default action by using the preventDefault method.
13.	Establishing event handlers with the DOM Level 2 Model
14.	Dynamically tracking the dimensions of an element

Tracking event propagation with bubble and capture handlers : Event « jQuery « JavaScript DHTML

Related examples in the same category