Question

以下是简化代码：

<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>

结果如下：父对象的事件侦听器都没有捕获这些事件，而捕获事件是我想要实现的。可能出现这样的结构：我们在页面上有一堆控制元素，它们都触发自己的事件，而文档或任何其他类型的容器根据捕获的事件类型操纵内容。

那么，有没有办法让'debug：复杂的逻辑改变元素的内部HTML'出现在控制台框中并使用自定义事件？

Answer 1

这有很多错误。为了让你的生活更轻松，不要使用这么多嵌套的匿名函数，它们可以工作，但有时难以解开。我把它清理干净，让你成为一个小提琴，这样你就可以看出它是如何起作用的。

http://jsfiddle.net/WQCDd/

您需要了解事件绑定以执行您想要的操作：https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Function/bind

另外，你没有在课堂上实现“事件”，所以你不能这样做.fireevent

几乎所有mootools课程的良好开端都是这样的：

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

    options: {

    },


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

MooTools：如何让对象捕获其嵌套对象中出现的自定义事件？

1 个答案: