Problem stems from the way how you add event listener. You set useCapture as true and such setting prevents listener from reaction to bubbling event. If you change following row: this.addEventListener("test", testFunc, true); to: this.addEventListener("test", testFunc); event will be handled by your testFunc....

You need to set the bubbles property to true, and you have to do this during the construction var event = new Event('shazam',{bubbles:true}); or the old way with initEvent, passing true as the second argument to allow bubble event.initEvent("shazam",true); MDN Doc...

When you call jQuery.noConflict(); you no longer associate jQuery with the $ variable. So things like $().click or $(selector) will throw errors. Instead, you can do something like this: jQuery.noConflict(); jQuery('a.try').click(handler); jQuery(window).height(); Or, you can also assign jQuery to a new variable, like this: var j$ = jQuery.noConflict(); j$('a.try').click(handler); j$(window).height();...