カスタムDOMイベントがイベントリスナーに届かないのはなぜですか？

Question

は、ここでそれがオフMDNに設けたexampleベースにして、私のコードです：

window.onload = function(){ 
    var element = document.createElement('div'); 

    var event = document.createEvent("HTMLEvents"); 
    event.initEvent("myClick", true, false); 

    element.dispatchEvent(event); 

    document.addEventListener("myClick", function(){ 
     alert("myClick event caught"); 
    }, false); 
} 

私はこれ、何も起こりません実行すると、送信またはイベントのキャッチ、何かが作成で間違っていた示しています。私がここで間違っているところを理解する助けに感謝します。

Answer 1

@Pablo Fernandezはオーダーについてはhis answerですが、もう1つの要素は要素がDOM内にある必要があるということです。

イベントをバブリングイベントにし、ハンドラをdocumentにアタッチしているためです。イベントがdocumentにバブルするには、バブリングする要素が、、documentの範囲内にある必要があります。

例：http://jsfiddle.net/nhsN4/

window.onload = function(){ 
    var element = document.createElement('div'); 

     // add element to the DOM 
    document.body.appendChild(element); 

    var evt = document.createEvent("HTMLEvents"); 

    evt.initEvent("myClick", true, false); 

     // add listener to the document 
    document.addEventListener("myClick", function(){ 
     alert("myClick event caught"); 
     alert(event.type); 
    }, false); 

     // dispatch the event on the element, and it bubbles up to the document 
    element.dispatchEvent(evt); 
}; 

---

あなたが作成したelementに直接ハンドラを追加した場合、あなたはそれがdocumentにせずにイベントを送出できます。

例：http://jsfiddle.net/nhsN4/1/

window.onload = function(){ 
    var element = document.createElement('div'); 

    var evt = document.createEvent("HTMLEvents"); 

    evt.initEvent("myClick", true, false); 

    // add listener to the element 
    element.addEventListener("myClick", function(){ 
     alert("myClick event caught"); 
     alert(event.type); 
    }, false); 

    element.dispatchEvent(evt); 
}; 

Answer 2

コードが間違った順番になっている可能性があります。dispatchEventがイベントを発生させるようですので、addEventListenerコールの後でなければなりません。