Capture keydown events for multiple child iFrames in parent document? - javascript

This question says the only way for an iFrame to capture keyboard events is when it has focus, but the goal is a little different.
Our page embeds multiple iFrames, all of whom monitor the same keydown events.
Is it possible to capture keydown events for all these child iFrames from the root document? This way, we can avoid code reduplication.
If not, is the only option to capture the keydown event in each child iFrame and push the event and handling up to the root document?

It doesn't seem possible. We decided to catch keydown events in each child iframe and pass them to the parent document where a master function processes all keyboard events.
Unfortunately, it repeats some code in each child iframe, but this seems unavoidable until a better solution emerges.

Related

What are the default events fired for mousedown on a span?

I have a span nested within several divs (nothing else special about the DOM) and on mousedown I'm running e.preventDefault() in order to prevent text selection from happening. I don't want to stop the span element from being focused on because I want to allow subsequent keydown events on it. I'm guessing the best way to do this would be to manually trigger events that I want from the list of default events that I'm preventing (though I'm open to other thoughts).
My question is, when I run e.preventDefault(), what things would naturally trigger? Or in other words, what things am I preventing?

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

Having a single event listener for custom events generated by any element in the page

I am in the process of creating a huge web application, with a JavaScript based UI, and many events generated continuously.
To avoid bad performance due to the huge amount of the event listeners needed, I of course opted to use a single event listener which will catch all the events generated from the children elements (event bubbling).
The problem is, this application is designed in such a way that one or more modules can be loaded into the main JavaScript library I'm coding (which is responsible for controlling the UI and every other aspect of the program). Of course every module should be completely independent from each other, so you can choose which methods to load, without affecting the general functionality of the library, only adding or removing features.
Since every module can operate in different DOM elements, I need to have at least a single event listener for each module, since two modules can listen for events generated by html elements placed in different DOM branches.
http://jsfiddle.net/YRejF/2/
In this fiddle for example, the first button will let the first paragraph trigger an event, and its parent will catch it. The second button will let the second paragraph fire the event, but the div listening for the same event won't catch it, because it's not fired from one of its sons.
So my question is: is it possible to have a single event listener, able to listen also to events triggered from elements that are not its sons (elements placed everywhere on the page)?
I was thinking about having a js object, or a dom node, which store the data of the element which triggered the event, and the event itself, then a general event will be fired on the global event listener (no matter where it's placed in the dom), and it will then read the data to discover which element generated which event, and act accordingly.
Any help or suggestion about better ways of achieving this?
jQuery has a special binder for this kind of cases: live(). It let's all events bubble to the document and then handles them accordingly. However, if you use div or other containers for different panels etc, maybe using delegate() makes more sense. Don't worry too much about the number of bound elements. Believe me, it will run as well with 50 binds or 10 delegates as it will with 1 live.

capturing bubbling key event from flash with javascript?

In IE, if flash has focus, and receives a keydown event, it does not appear to bubble the event up through the DOM (I can't capture the event by listening on document, however the same listener can capture key events from html siblings, so I know my listener is working).
However, some other plugins on the page (I am looking at you windows media player) still respond to key events that initiate in flash (and I need to prevent that from happening)! It seems that the key event initiated in flash takes the bubble express highway straight to the top (where the top is whatever is above document in the DOM hierarchy).
I have tried terminating the events in as3, and tried different wmodes... neither approach works. Is there something I might have missed?
Focus just the swf container :
document.getElementById('flash-object').focus();

Catching tab key navigation

I want to catch which element is on focus when users use tab key to move their focus. For example, there is a form and users can use tab key to move forward to next form element. I'd like to know which element is the current on focus.
Thanks,
Paul
For many event types one can use event delegation, whereby one captures the event on some containing element as it bubbles up the document hierarchy, and then establishes the element on which the event originated. Unfortunately, the focus, blur, and
change events do not bubble.
However, in DOM implementations that implement the standard DOM Events model, one can instead use the capture phase, which intercepts the event on its way down to the element where it will fire.
This doesn't work in (surprise, surprise) Internet Explorer (IE), which still doesn't have an implementation of the standard event model, even in IE8. However, IE has its own focusin and focusout events, which do bubble.
The end result is that, as usual, one has to write one's code so as to deal with the way proper browsers work, and also with the way IE works.
Luckily this is one of those cases where ppk (aka Peter-Paul Koch) of quirksmode.org has already done the hard work: his article Delegating the focus and blur events should tell you all you need to know, as well as providing a succinct explanation of how event delegation works.
use the onFocus event on the form elements, so
<form>
<input id="fred" type="text" onFocus="alert('focused this');"/>
</form>
check out http://www.w3.org/TR/html4/interact/scripts.html#adef-onfocus
there are javascript events that are related to focus. The onfocus and onblur (opposite of focus) events can be used to update a variable that says which form element is currently in focus.

Categories

Resources