1

这是简化的代码：

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

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

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

4

1 回答 1

0

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

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);   
    }
});
于 2013-03-18T21:53:21.443 回答