MozillaWiki

WebAPI/BrowserAPI/KeyboardEvent: Difference between revisions

Page Discussion

WebAPI/BrowserAPI/KeyboardEvent (view source)

Revision as of 09:33, 7 May 2014

1,259 bytes added ,  7 May 2014
→‎How to Fulfill Scenarios?
Line 48: Line 48:
=== How to Fulfill Scenarios? ===
=== How to Fulfill Scenarios? ===
Here are some examples for each scenario.
Here are some examples for each scenario.
==== Scenario 1. SYSTEM-ONLY ====
 
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
* mozbrowser-embedder iframe
     window.addEventListener('mozbrowserbeforekeydown') = function(evt) {
     window.addEventListener('mozbrowserbeforekeydown', handleEventAndPreventDefault);
      evt.preventDefault();
    window.addEventListener('mozbrowserbeforekeyup', handleEventAndPreventDefault);
     };
     window.addEventListener('mozbrowserkeydown', function() { });
     window.addEventListener('mozbrowserbeforekeyup') = function(evt) {
     window.addEventListener('mozbrowserkeyup', function() { });
      evt.preventDefault();
* mozbrowser-embedded iframe
     };
    window.addEventListener('keydown', handleEvent);
     window.addEventListener('keyup', handleEvent);


  {| border="0" align="left"
  {| border="0" align="left"
  ! Order !! mozbrowser-embedder iframe !! mozbrowser-embedded iframe
  ! width="80px" | Order !! width="200px" | mozbrowser-embedder iframe !! width="200px" | mozbrowser-embedded iframe !! Output
|-
| 1 || mozbrowserbeforekeydown || || Receive event 'mozbrowserbeforekeydown'.
  |-
  |-
  | style="border-right: 50px solid white" | 1 || style="border-right: 50px solid white" | mozbrowserbeforekeydown ||
  | 2 || mozbrowserkeydown || ||
  |-
  |-
  | 2 || mozbrowserbeforekeyup ||
  | 3 || mozbrowserbeforekeyup || || Receive event 'mozbrowserbeforekeyup'.
|-
| 4 || mozbrowserkeyup || ||
  |}
  |}


==== Scenario 2. SYSTEM-FIRST ====
==== Scenario SYSTEM-FIRST ====
* mozbrowser-embedder iframe
* mozbrowser-embedder iframe
     window.addEventListener('mozbrowserbeforekeydown') = function(evt) {
     window.addEventListener('mozbrowserbeforekeydown', handleEvent);
      // do something
    window.addEventListener('mozbrowserbeforekeyup', handleEvent);
    };
    window.addEventListener('mozbrowserkeydown', function() { });
     window.addEventListener('mozbrowserbeforekeyup') = function(evt) {
     window.addEventListener('mozbrowserkeyup', function() { });
      // do something
    };
* mozbrowser-embedded iframe
* mozbrowser-embedded iframe
     window.addEventListener('keydown') = function(evt) {
     window.addEventListener('keydown', handleEvent);
      // do something
     window.addEventListener('keyup', handleEvent);
    };
     window.addEventListener('keyup') = function(evt) {
      // do something
    };


  {| border="0" align="left"
  {| border="0" align="left"
  ! Order !! mozbrowser-embedder iframe !! mozbrowser-embedded iframe
  ! width="80px" | Order !! width="200px" | mozbrowser-embedder iframe !! width="200px" | mozbrowser-embedded iframe !! Output
  |-
  |-
  | style="border-right: 50px solid white" | 1 || style="border-right: 50px solid white" | mozbrowserbeforekeydown ||
  | 1 || mozbrowserbeforekeydown || || Receive event 'mozbrowserbeforekeydown'.
  |-
  |-
  | 2 || || keydown
  | 2 || || keydown || Receive event 'keydown'.
  |-
  |-
  | 3 || mozbrowserbeforekeyup ||
  | 3 || mozbrowserkeydown || ||
  |-
  |-
  | 4 || || keyup
  | 4 || mozbrowserbeforekeyup || || Receive event 'mozbrowserbeforekeyup'.
|-
| 5 || || keyup || Receive event 'keyup'.
|-
| 6 || mozbrowserkeyup || ||
  |}
  |}


==== APP-ONLY ====
==== Scenario APP-ONLY ====
* mozbrowser-embedder iframe
* mozbrowser-embedder iframe
     window.addEventListener('mozbrowserkeydown') = function(evt) {
     window.addEventListener('mozbrowserbeforekeydown', function() { });
      // evt.embeddedcancelled = true;
     window.addEventListener('mozbrowserbeforekeyup', function() { });
    };
    window.addEventListener('mozbrowserkeydown', checkAttrAndHandleEvent);
     window.addEventListener('mozbrowserkeyup') = function(evt) {
     window.addEventListener('mozbrowserkeyup', checkAttrAndHandleEvent);
      // evt.embeddedcancelled = true;
     };
* mozbrowser-embedded iframe
* mozbrowser-embedded iframe
     window.addEventListener('keydown') = function(evt) {
     window.addEventListener('keydown', handleEventAndPreventDefault);
      evt.preventDefault();
     window.addEventListener('keyup', handleEventAndPreventDefault);
    };
     window.addEventListener('keyup') = function(evt) {
      evt.preventDefault();
    };


  {| border="0" align="left"
  {| border="0" align="left"
  ! Order !! mozbrowser-embedder iframe !! mozbrowser-embedded iframe
  ! width="80px" | Order !! width="200px" | mozbrowser-embedder iframe !! width="200px" | mozbrowser-embedded iframe !! Output
|-
| 1 || mozbrowserbeforekeydown || ||
  |-
  |-
  | style="border-right: 50px solid white" | 1 || || style="border-right: 50px solid white" |keydown
  | 2 || || keydown || Receive event 'keydown'.
  |-
  |-
  | 2 || mozbrowserkeydown ||
  | 3 || mozbrowserkeydown || ||
  |-
  |-
  | 3 || || keyup
  | 4 || mozbrowserbeforekeyup || ||
  |-
  |-
  | 4 || mozbrowserkeyup ||
  | 5 || || keyup || Receive event 'keyup'.
|-
| 6 || mozbrowserup || ||
  |}
  |}
==== APP-FIRST ====
 
==== Scenario APP-FIRST ====
* mozbrowser-embedder iframe
* mozbrowser-embedder iframe
     window.addEventListener('mozbrowserkeydown') = function(evt) {
     window.addEventListener('mozbrowserbeforekeydown', function() { });
      // evt.embeddedcancelled = false;
     window.addEventListener('mozbrowserbeforekeyup', function() { });
    };
    window.addEventListener('mozbrowserkeydown', checkAttrAndHandleEvent);
     window.addEventListener('mozbrowserkeyup') = function(evt) {
     window.addEventListener('mozbrowserkeyup', checkAttrAndHandleEvent);
      // evt.embeddedcancelled = false;
     };
* mozbrowser-embedded iframe
* mozbrowser-embedded iframe
     window.addEventListener('keydown') = function(evt) {
     window.addEventListener('keydown', handleEvent);
      // do something
     window.addEventListener('keyup', handleEvent);
    };
     window.addEventListener('keyup') = function(evt) {
      // do something
    };


  {| border="0" align="left"
  {| border="0" align="left"
  ! Order !! mozbrowser-embedder iframe !! mozbrowser-embedded iframe
  ! width="80px" | Order !! width="200px" | mozbrowser-embedder iframe !! width="200px" | mozbrowser-embedded iframe !! Output
|-
| 1 || mozbrowserbeforekeydown || ||
|-
| 2 || || keydown || Receive event 'keydown'.
  |-
  |-
  | style="border-right: 50px solid white" | 1 || || style="border-right: 50px solid white" | keydown
  | 3 || mozbrowserkeydown || || Receive event 'mozbrowserkeydown'.
  |-
  |-
  | 2 || mozbrowserkeydown ||
  | 4 || mozbrowserbeforekeyup || ||
  |-
  |-
  | 3 || || keyup
  | 5 || || keyup || Receive event 'keyup'.
  |-
  |-
  | 4 || mozbrowserkeyup ||
  | 6 || mozbrowserkeyup || || Receive event 'mozbrowserkeyup'.
  |}
  |}


Gyeh
Confirmed users
29

edits

Retrieved from "https://wiki.allizom.org/Special:MobileDiff/974261"