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


    User Input

    Normalized User Input

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

    Normalized Input Events

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

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

    Down--指针被按下时产生

    Up--当指针释放时产生

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

    Move--当指针移动时产生

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

    Leave--pointer离开DOM节点

    Dragstartdragfinish--pointer移动超过一定值之后产生的事件

    Dragdrop--发送pointer移动的源目标,提供该item移到或释放的另一个元素

    Dragoverdragout

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

    Release--hold后释放

    Holdpulse--长按,200ms一次。

    Flick--快速点击

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

     

         切记,标准事件都是由enyocontrol产生的,不是由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,onkeypressonkeyup事件。每次敲键盘都会触发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 });

     

     

     

  • 相关阅读:
    输入和输出

    4. 深入 Python 流程控制
    js下拉框选择图片
    按下enter触发事件
    js多种方法取数组的最后一个元素
    apply,call,bind函数作用与用法
    vue中的js绑定样式
    js添加删除class
    rem等比例自适应手机尺寸
  • 原文地址:https://www.cnblogs.com/waimai/p/2855348.html
Copyright © 2020-2023  润新知