簡略化されたコードは次のとおりです。
<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を変更する複雑なロジック」をコンソールボックスに表示する方法はありますか?