enyo官方开发入门教程翻译一User Input

User Input

Normalized User Input

Enyo提供了一套规范的跨平台的事件，以使开发者的应用使用同一套事件处理代码即可运行在各种手机和平板平台上。

Normalized Input Events

    在Enyo核心包中，dom (drag.js, gesture.js) 和 (gesture.js, msevents.js,touch.js)制订了标准事件。

     下面的标准事件是由DOM事件合成的：

Down--指针被按下时产生

Up--当指针释放时产生

Tap--指针按下后释放产生。底层DOM元素同时收到down和up事件

Move--当指针移动时产生

Enter--当pointer进入以DOM节点时产生

Leave--pointer离开DOM节点

Dragstart和dragfinish--当pointer移动超过一定值之后产生的事件

Drag和drop--发送pointer移动的源目标，提供该item移到或释放的另一个元素

Dragover和dragout

Hold--一直点住不移动超过200ms

Release--hold后释放

Holdpulse--长按，200ms一次。

Flick--快速点击

    在Android平台，touchmove事件必须通过inEvent.preventDefault()方法阻止，否则enyo的拖拽系统不能正常工作。

 

     切记，标准事件都是由enyo的control产生的，不是由DOM元素产生的。

 

     Enyo处理标准事件的例子：

 

 1 enyo.kind({
 2     name: "App"
 3     kind: "enyo.FittableRows",
 4     components: [
 5         {kind: "enyo.Button", content: "Tap Me", ontap: "handleTap"},
 6         ...
 7     ],
 8     ...
 9     handleTap: function(inSender, inEvent) {
10         // respond to tap
11     }
12 });

 

Normalized Input Event Properties

     标准输入事件的公共属性：

• target
• relatedTarget
• clientX
• clientY
• pageX
• pageY
• screenX
• screenY
• altKey
• ctrlKey
• metaKey
• shiftKey
• detail
• identifier

Keyboard Input

     因为Enyo应用可能运行在桌面上，框架必须能够处理键盘输入事件（与鼠标事件不同，它不能转换为标准输入事件）。

     现在，在大多数情况下你不必担心直接处理应用中的键盘输入。如果你的应用使用了Enyo或Onyx中的text field kinds，这些kinds会自动处理键盘的输入。然而在一些情况下（如游戏）你可能希望应用能够直接处理与键盘相关的DOM事件。这时，你可以使用enyo.Signals实例来监听onkeydown，onkeypress和onkeyup事件。每次敲键盘都会触发onkeydown和onkeyup事件，如果敲键盘后输入了一个字符还好在onkeydown之后onkeyup之前产生onkeypress事件。

    下面的示例kind实现了简单的键盘事件：

 1 enyo.kind({
 2     name: "KeyboardEventExample",
 3     kind: "enyo.FittableRows",
 4     classes: "onyx",
 5     components: [
 6         {name: "myContent", content: "Please do not press the spacebar."},
 7         {kind: enyo.Signals, onkeypress: "handleKeyPress",
 8             onkeydown: "handleKeyDown", onkeyup: "handleKeyUp"}
 9     ],
10     handleKeyDown: function(inSender, inEvent) {
11         // Can use inEvent.keyCode to detect non-character keys
12         if (inEvent.keyCode === 8) {
13             // respond to backspace
14         }
15     },
16     handleKeyPress: function(inSender, inEvent) {
17         // Use inEvent.charCode to detect spacebar
18         if (inEvent.charCode === 32) {
19             this.$.myContent.setContent("I thought I asked you not to press the spacebar.");
20         } else {
21         var key = String.fromCharCode(inEvent.charCode).toUpperCase();
22             this.$.myContent.setContent("Last key pressed: " + key);
23         }
24     },
25     handleKeyUp: function(inSender, inEvent) {
26         // Respond to keyup, if desired
27     }
28 });