MooTools: How do I make an object capture a custom event occured in its nested object?

Here's the simplified code:

<html>
<head>
    <script type="text/javascript">
        var ParentDiv = new Class ({    
            initialize : function(htmlElement) {
                console.log('debug: parent object created');    
                $$('.childDiv').each(function(childDiv){
                    childDiv = new ChildDiv(childDiv);
                })    
                htmlElement.addEvents({
                    'click': function (){
                        console.log('debug: clicked parent');
                    },    
                    'testEvent' : function(){
                        console.log('debug: complex logic altering inner HTML of the element');
                    }
                })
            }
        });

        function initParent () {
            $$('.parentDiv').each(function(parentDiv){parentDiv = new ParentDiv(parentDiv);})
        }

        var ChildDiv = new Class ({
            initialize : function(htmlElement) {
                console.log('debug: child object created');
                htmlElement.addEvent('click', function (){
                    console.log('debug: clicked child');
                    this.addEvent('testEvent', function(){console.log('debug: grabbed an event in child element, fired by child element')})
                    this.fireEvent('testEvent');
                })
            }


        });

        document.addEvent('domready', function(){
            initParent();
        });


    </script>
</head>

<body>
<div class="parentDiv">
    <div>
        <div>
            <div>
                <div class="childDiv">Clicky Thingy</div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

The outcome is the following: neither of the events are grabbed by parent object's event listeners, while capturing the events is something I'm trying to achieve. A possible occurance of such structure: we have a bunch of control elements on the page, they all fire their own events, while the document or any other kind of container manipulates the content within based on the captured event's type.

So, is there a way to make 'debug: complex logic altering inner HTML of the element' appear in the console box with the use of custom events?

Solution

There is a lot wrong with this. To make you life easier, dont use so many nested anonymous functions, they work, but make it hard to untangle sometimes. I cleaned it up and made you a fiddle so you can see how this may work.

http://jsfiddle.net/WQCDd/

You need to learn about event binding to do what you want: https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Function/bind

Also, you were not implementing the "events" on the class so you cant do this.fireevent

A good start to almost any mootools class will look like this:

var ClassName = new Class({
        Implements: [Options, Events],

    options: {

    },


    initialize: function(options){      
        this.setOptions(options);   
    }
});