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 に答える