爲什麼我的自定義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關於順序，但另一個組件是你的元素需要在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之後調用。