Question

I’m attempting to fire events behind an element. It works pretty well, with one hitch: it throws an error if an event is not bound to the target element.

I have an element overlaying the entire page. When event happens, the elements goes away and JavaScript simulates that event on the element behind it. Relevant code:

e.target.parentNode.removeChild(e.target);  
var ghost = document.elementFromPoint(e.pageX, e.pageY);
ghost.dispatchEvent(e.type);

Which works PERFECTLY, except that if ghost doesn’t have that particular event bound, it throws an ugly:

UNSPECIFIED_EVENT_TYPE_ERR: DOM Events Exception 0

Is there a way to detect on ghost if the event is bound? No libraries, please.

Answer 1

.dispatchEvent takes an Event object, not a string.

See http://jsfiddle.net/xEmcy/1/

document.querySelector("div").addEventListener("click", function(e) {
    var evt = document.createEvent('Event');
    evt.initEvent(e.type, true, true);
    document.querySelector("span").dispatchEvent(evt);
}, false);


document.querySelector("span").addEventListener("click", function(e){
   alert("via trigger"); 
});​

Also tested that it doesn’t throw if there is no event listener on the span.