Develop Reference

Can I use jQuery .trigger() with event listeners added with addEventListener()?

In my (javascript, jQuery) code, I use two ways of firing events
jQuery('body').trigger('crazy-trigger-event');
jQuery("body").get(0).dispatchEvent(new CustomEvent("crazy-dispatch-event"));
In the snippet here:
http://jsfiddle.net/jts9jhbt/3/
I have registered for custom events using both jQuery .on() and the DOM .addEventListener() methods.
Then I fire the events using both jQuery .trigger() and DOM .dispatchEvent() methods.
It seems like the listeners registered using .on() receive events fired both ways.
But the listeners registered with .addEventListener() only receive events fired using .dispatchEvent().
My use case is that I have a mix of legacy code and jQuery code, and it seems like it's safest to use .dispatchEvent() so that it's compatible with both.
So is there some change to the code I can make so that listeners registered with .addEventListener() can recieve events from .trigger() ?

Simple Answer
No, you can't.
Explanation
The main reason is that jQuery needs to work across multiple browsers and ...
"[...] jQuery's event system is a layer on top of the DOM event system."
Eventhough there are exceptions, there is no efficient way for jQuery to know which events are supported by the browser currently due to the lack of a getEventListeners method.
The developers think that the creation of a solution
"[...] isn't possible to do without breaking existing code or causing performance issues."
If that sounds like a challenge to anybody, you are free to prove them wrong by posting your solution.
The detailed explanation can be found in Dave Methvin's answers to jQuery's issue #2476.

Opening all links with class popup in a new window

I have lots of links on my page with class="popup".
I want all of these to open in a new window.
Any nice way to define this with JavaScript?

I am using .live() to support links that might be added later to the DOM. If you are not adding links from event handlers, Ajax callbacks, etc., you can simply use .click().
$('a.popup').live('click', function (e) {
window.open(this.href);
e.preventDefault();
});
Please note, that according to the current HTML5 spec, you can also use:
as you previously could in HTML4. This way, you do not need Javascript. Using target is not recommended though on an XHTML doctype, because it is not considered a valid attribute.
UPDATE: From the jQuery documentation
As of jQuery 1.7, the .live() method is deprecated. Use .on() to
attach event handlers. Users of older versions of jQuery should use
.delegate() in preference to .live().
If you need help changing your code, be sure to check previous StackOverflow questions. Using the SO search [jquery] live deprecated is a good start.

You can put this in your $(document).ready()
$('a.popup').attr('TARGET', '_BLANK');

How to trigger event on dynamically generated elements (in mootools)

Example to demonstrate the issue can be found here:
http://jsfiddle.net/Byyu2/
As you can see only the first "Add" button triggers an event. The dynamically generated button does not. This is understandable as on page load these elements have not been created.
So what do I need to change to enable dynamically generated elements to also be registered to an event?
Thanks for looking.

The answer mentioned is quite old. If you can, upgrade to MooTools 1.3 instead of 1.2. In MooTools More, you will find the Element.Delegation package. The package handles delegation for all MooTools native events, except focus, blur, mouseenter and mouseleave.
You will find an updated JS Fiddle here: http://jsfiddle.net/Byyu2/1/

An answer on implementing .live (from jQuery) in mootools may be of some use.

What about using Element.cloneEvents?
Check this sample:
http://jsfiddle.net/Byyu2/5/
It looks kind of ugly, because you can't call cloneEvents() directly on the new row (cloneEvents() does not work recursivly), but it works :-)

Documentation for JavaScript Event Hanlders

I am looking for a list of all JavaScript event handlers (such as onLoad, onSubmit ect...) and the corresponding html tags that they can be applied to. This is is the best document I have found so far, but I believe it is is incomplete. The W3 specs are even worse, all it says is "This attribute may be used with most elements.". All browsers have their own quarks, if you know of a document for a specific browser like Firefox or IE that would also be helpful.

Try Quirksmode and Quirksmode event compatibility tables
Here's a nice tutorial too.

Take a look on quirksmode.org: http://quirksmode.org/dom/events/index.html

dojo AccordionPane onSelected replacement

According to the dojo docs, dijit.layout.AccordionPane is deprecated in favor of dijit.layout.ContentPane
link: http://api.dojotoolkit.org/jsdoc/1.3.2/dijit.layout.AccordionPane
I cannot find an attribute for ContentPane that functions similarly to the AccordionPane's "onSelected" attribute. Is there another widiget or another way to use the ContentPane widget to reproduce this behavior?
I have definitely tried onClick and onFocus to no avail.

I think you should not use deprecated AccordionPane. ContentPane's onShow does what you want.

After more research, it seems that in the 1.4.0beta2 release, this is addressed with the "onShow" attribute to ContentPane. I just tested and it does work.
So for now, the AccordionPane still works as expected although it is technically deprecated.