WebAPI/BrowserAPI/KeyboardEvent: Difference between revisions
< WebAPI | BrowserAPI
Jump to navigation
Jump to search
Line 189: | Line 189: | ||
! Default action | ! Default action | ||
| keydown event | | keydown event | ||
|} | |||
==== keydown ==== | |||
{| border="1" | |||
! Type | |||
| keydown | |||
|- | |||
! Interface | |||
| KeyboardEvent | |||
|- | |||
! Sync/Async | |||
| Sync | |||
|- | |||
! Bubbles | |||
| Yes | |||
|- | |||
! Target | |||
| Document, Element | |||
|- | |||
! Cancelable | |||
| Yes | |||
|- | |||
! Default action | |||
| Set mozbrowserkeydown.embeddedCancelled to false | |||
|} | |} | ||
Line 237: | Line 261: | ||
! Default action | ! Default action | ||
| keyup event | | keyup event | ||
|} | |||
==== keyup ==== | |||
{| border="1" | |||
! Type | |||
| keyup | |||
|- | |||
! Interface | |||
| KeyboardEvent | |||
|- | |||
! Sync/Async | |||
| Sync | |||
|- | |||
! Bubbles | |||
| Yes | |||
|- | |||
! Target | |||
| Document, Element | |||
|- | |||
! Cancelable | |||
| Yes | |||
|- | |||
! Default action | |||
| Set mozbrowserkeyup.embeddedCancelled to false | |||
|} | |} | ||
Revision as of 09:48, 7 May 2014
Dispatch KeyboardEvent across BrowserElements
This is a proposal to enable applications to handle/override the behavior of certain KeyboardEvent.
There are four scenarios which should be fulfilled:
Scenario | Description | Example Keys |
---|---|---|
SYSTEM-ONLY | For keys which should be handled by mozbrowser embedder iframe only. | 'Power', 'VolumeUp', 'VolumeDown', 'VolumeMute', 'DisplaySwap' |
SYSTEM-FIRST | For keys which can be handled by mozbrowser embedder iframe first and can also be handled by mozbrowser embedded iframe then. | 'Info', 'Settings' |
APP-ONLY | For keys which should be handled by mozbrowser embedded iframe only. | 'ColorF0Red', 'ColorF1Green', 'ColorF2Yellow', 'ColorF3Blue', 'ColorF4Grey' |
APP-FIRST | For keys which keys can be handled by mozbrowser embedded iframe first and can also be handled by mozbrowser embedder iframe then. | 'Info', 'Settings' |
Note that some keys could be either SYSTEM-FIRST or APP-FIRST. The behavior is decided by the author of applications.
Proposal Concept
Four new events are proposed:
- mozbrowserbeforekeydown
- mozbrowserkeydown
- mozbrowserbeforekeyup
- mozbrowserkeyup
When a key is pressed down, the event sequence would be:
- 'mozbrowserbeforekeydown' is dispatched to mozbrowser-embedder iframe
- 'keydown' is dispatched to mozbrowser-embedded iframe
- 'mozbrowserkeydown' is dispatched to mozbrowser-embedder iframe
Similarly, when a key is released, the event sequence would be:
- 'mozbrowserbeforekeyup' is dispatched to mozbrowser-embedder iframe
- 'keyup' is dispatched to mozbrowser-embedded iframe
- 'mozbrowserkeyup' is dispatched to mozbrowser-embedder iframe
This proposal can be extended to nested mozbrowser iframes. The four new events will be dispatched to all mozbrowser-embedder iframes.
How to Fulfill Scenarios?
Here are some examples for each scenario.
Let's define some functions first.
function handleEvent(event) { dump("Receive event \'" + event.type + "\'."); };
function handleEventAndPreventDefault(event) { dump("Receive event \'" + event.type + "\'."); event.preventDefault(); };
function checkAttrAndHandleEvent(event) { if (!event.embeddedCancelled) { dump("Receive event \'" + event.type + "\'."); } };
Scenario SYSTEM-ONLY
- mozbrowser-embedder iframe
window.addEventListener('mozbrowserbeforekeydown', handleEventAndPreventDefault); window.addEventListener('mozbrowserbeforekeyup', handleEventAndPreventDefault); window.addEventListener('mozbrowserkeydown', function() { }); window.addEventListener('mozbrowserkeyup', function() { });
- mozbrowser-embedded iframe
window.addEventListener('keydown', handleEvent); window.addEventListener('keyup', handleEvent);
Order | mozbrowser-embedder iframe | mozbrowser-embedded iframe | Output |
---|---|---|---|
1 | mozbrowserbeforekeydown | Receive event 'mozbrowserbeforekeydown'. | |
2 | mozbrowserkeydown | ||
3 | mozbrowserbeforekeyup | Receive event 'mozbrowserbeforekeyup'. | |
4 | mozbrowserkeyup |
Scenario SYSTEM-FIRST
- mozbrowser-embedder iframe
window.addEventListener('mozbrowserbeforekeydown', handleEvent); window.addEventListener('mozbrowserbeforekeyup', handleEvent); window.addEventListener('mozbrowserkeydown', function() { }); window.addEventListener('mozbrowserkeyup', function() { });
- mozbrowser-embedded iframe
window.addEventListener('keydown', handleEvent); window.addEventListener('keyup', handleEvent);
Order | mozbrowser-embedder iframe | mozbrowser-embedded iframe | Output |
---|---|---|---|
1 | mozbrowserbeforekeydown | Receive event 'mozbrowserbeforekeydown'. | |
2 | keydown | Receive event 'keydown'. | |
3 | mozbrowserkeydown | ||
4 | mozbrowserbeforekeyup | Receive event 'mozbrowserbeforekeyup'. | |
5 | keyup | Receive event 'keyup'. | |
6 | mozbrowserkeyup |
Scenario APP-ONLY
- mozbrowser-embedder iframe
window.addEventListener('mozbrowserbeforekeydown', function() { }); window.addEventListener('mozbrowserbeforekeyup', function() { }); window.addEventListener('mozbrowserkeydown', checkAttrAndHandleEvent); window.addEventListener('mozbrowserkeyup', checkAttrAndHandleEvent);
- mozbrowser-embedded iframe
window.addEventListener('keydown', handleEventAndPreventDefault); window.addEventListener('keyup', handleEventAndPreventDefault);
Order | mozbrowser-embedder iframe | mozbrowser-embedded iframe | Output |
---|---|---|---|
1 | mozbrowserbeforekeydown | ||
2 | keydown | Receive event 'keydown'. | |
3 | mozbrowserkeydown | ||
4 | mozbrowserbeforekeyup | ||
5 | keyup | Receive event 'keyup'. | |
6 | mozbrowserup |
Scenario APP-FIRST
- mozbrowser-embedder iframe
window.addEventListener('mozbrowserbeforekeydown', function() { }); window.addEventListener('mozbrowserbeforekeyup', function() { }); window.addEventListener('mozbrowserkeydown', checkAttrAndHandleEvent); window.addEventListener('mozbrowserkeyup', checkAttrAndHandleEvent);
- mozbrowser-embedded iframe
window.addEventListener('keydown', handleEvent); window.addEventListener('keyup', handleEvent);
Order | mozbrowser-embedder iframe | mozbrowser-embedded iframe | Output |
---|---|---|---|
1 | mozbrowserbeforekeydown | ||
2 | keydown | Receive event 'keydown'. | |
3 | mozbrowserkeydown | Receive event 'mozbrowserkeydown'. | |
4 | mozbrowserbeforekeyup | ||
5 | keyup | Receive event 'keyup'. | |
6 | mozbrowserkeyup | Receive event 'mozbrowserkeyup'. |
Proposal Details
mozbrowserbeforekeydown
Type | mozbrowserbeforekeydown |
---|---|
Interface | KeyboardEvent |
Sync/Async | Sync |
Bubbles | Yes |
Target | Document, Element |
Cancelable | Yes |
Default action | keydown event |
keydown
Type | keydown |
---|---|
Interface | KeyboardEvent |
Sync/Async | Sync |
Bubbles | Yes |
Target | Document, Element |
Cancelable | Yes |
Default action | Set mozbrowserkeydown.embeddedCancelled to false |
mozbrowserkeydown
Type | mozbrowserkeydown |
---|---|
Interface | KeyboardEvent |
Sync/Async | Sync |
Bubbles | Yes |
Target | Document, Element |
Cancelable | Yes |
Default action | None |
mozbrowserbeforekeyup
Type | mozbrowserbeforekeyup |
---|---|
Interface | KeyboardEvent |
Sync/Async | Sync |
Bubbles | Yes |
Target | Document, Element |
Cancelable | Yes |
Default action | keyup event |
keyup
Type | keyup |
---|---|
Interface | KeyboardEvent |
Sync/Async | Sync |
Bubbles | Yes |
Target | Document, Element |
Cancelable | Yes |
Default action | Set mozbrowserkeyup.embeddedCancelled to false |
mozbrowserkeyup
Type | mozbrowserkeyup |
---|---|
Interface | KeyboardEvent |
Sync/Async | Sync |
Bubbles | Yes |
Target | Document, Element |
Cancelable | Yes |
Default action | None |