Develop Reference

Prevent new EventListener from triggering for event that occurred just before the EventListener was added

MDN explains:
If an EventListener is added to an EventTarget while it is processing an event, that event does not trigger the listener. However, that same listener may be triggered during a later stage of event flow, such as the bubbling phase.
What are the ways to prevent this from happening?
Possible Solutions:
Call event.stopPropagation() when the event is invoked.
I'm not a fan of this solution because the solution is not localized near the problem. The solution is in where the click originates and the problem is the code that adds the new event listener.
Add the event listener inside of a setTimeout:setTimeout(() => {element.addEventListener('click', clickHandler},0)
This solution is cohesive: the problem of the new eventListener triggering immediately is solved right where the event listener is added. Also it doesn't stop propagation for an event that other listeners might depend on. However, it feels like a hack to wrap it inside a setTimeout like this.
Do better solutions exist to prevent the new event listener from firing immediately due to the click that caused the event listener to be added?
This problem occurred for me when attempting to make a popup appear that closes itself for a click outside. Since the click that creates the popup is also a click outside. The popup closes immediately.
Link to example use-case including solutions

Prevent event triggering on bubbling and on capturing in JavaScript

Is it possible to prevent event triggering on bubbling and on capturing in JavaScript?
The e.stopPropagation() is not what I am looking for.
In my case I would like only a direct window blur to trigger the event. Triggering the blur event on window on every child control blur affects performance. (I believe that it is not related to the question, but still in order to avoid the xyz problem I will mention that I am using the blur event on window to check that the blur happened due to iframe click and in case it did, then I run some code. I.e. what I need here is a way to attach a blur listener to window, so that the blur listener would run only on window blur, but not on its children blur.)
Maybe there is a way to add an event listener to a target phase of window blur only? Or will the listener be always called on bubble and on capture and it is impossible to avoid?

event bubbling travels from child to parent. So it is essentially event capturing which you want to prevent.
When you add a event listener using
window.addEventListener("focus", callback, true/false)
This third argument suggest capturing or bubbling. So if you will just keeps it false event will just bubble and since window is the top most element it wont be propagated to anywhere else.

Combine events or force one to fire before the other

Is there a way to combine two events into one?
For example a click event and someObject.selection event so I'll have access to both events' data? Both fire on a mouse click.
Alternatively, is there a way to guarantee one event firing before the other if both listen for a mouse click?

Two click events fired: on fixed positioned <div> and <a>

I have a couple of questions regarding events attached to DOM nodes. Consider the following:
http://jsfiddle.net/hXq6r/15/
Basic:
[1?] What level is the [I] (class="fixed") dom node? What level is the [II] class="container"> dom node?
[2?] How do you describe the relationship between the objects mentioned in 1? Ancestors are siblings?
[3?] When clicking the .fixed - why is the hyperlink event not triggered?
Problem:
All runs as expected. Now running this code in the Android WebView causes the problem: The click event is fired first on #button and then again on the hyperlink. I am running phonegap 1.4.1 I have no event handler attached to the hyperlink, it is just the default hyperlink event.
[4?] How is the default hyperlink event named? Click?
Advanced:
[5?] Which of the elements fires the click event first? Does it depend on the 1. level in the dom?
[6?] It seems that [I] fires first.
[7?] How can I stop the click event on [II] from firing if [I] fired previously? I just set a variable to check. Is this the best solution?
[8?] Event propagation - I assume this is of no use for this example, because we are looking at children, no ancestors. Should I delegate the event on a higher level?
Thanks : ). Hopefully this helps me with grasping the whole event basics.
Useful:
http://www.quirksmode.org/js/introevents.html
http://www.quirksmode.org/js/events_order.html

onmouseout event control

I have a DIV with a mouseout observer.
This DIV have also child Elements. mouseout event will alse be fired if the mouse pointer enter any of its child elements.
How can I prevent this behavior?

That’s expected behaviour.
However you can prevent it by giving those child elements an onmouseout event as well and returning false.
returning false in the event handler will stop the propagation of the event to parent-elements.

You may want to check a JS library.
JQuerys mouseleave function/event seems to be exactly what you’re looking for.
The API page also states the mouseleave event is IE-proprietary but JQuery emulates it for other browsers. If you don’t want to use JQuery you may want to check their source. api.jquery.com/mouseleave