目录

公共事件

事件名 说明
onload 页面被载入时调用
onclick 鼠标被单击时调用
onfocus 获得焦点时触发的事件
onchange 失去焦点时，且控件值发生变化，一般是用在input上
ondestroy 页面销毁的时候调用
onpause 进入后台时被调用
onrestart 页面重新启动的时候调用
onresume 进入activity时被调用
onstart 进入activity时调用，短时重新进入不调
onstop 长时间进入后台进被调用
ontouch 在触摸事件中，改变变量值，并重绘画面
onintercepttouch 开启触摸事件后，结束使用，与ontouch配对使用
ondoubletap 双击控件时触发的事件
onlongclick 长按控件时触发的事件
onswipeup 在控件上上滑时触发的事件
onswipedown 在控件上下滑时触发的事件
onswipeleft 在控件上左滑时触发的事件
onswiperight 在控件上右滑时触发的事件
onkeydown Window上新增onkeydown事件，监听回退键传参

参考实例

onclick事件

可以为支持点击事件的控件添加该事件，在点击该控件时触发。

用法

  1. <input id="button1" value="按钮" onclick="btnclick()" type="button"/>
  1. function btnclick(sender, args){
  2.     $alert("点击了按钮");
  3. }

ondoubletap事件

可以为支持点击事件的控件添加该事件，在双击该控件时触发。

用法

  1. <div id="panel0" ondoubletap="this.ondouble()"/>
  1. function com$requirements$SignalController$ondouble(sender, args){
  2.     $alert("双击变蓝色");
  3.     $id("panel0").set("background", "#0080ff");
  4. }

onswipeup事件

在该控件上上滑时触发的事件。

用法

  1. <div id="panel0" ondoubletap="this.onswipeup()"/>
  1. function com$requirements$SignalController$onswipeup(sender, args){
  2.     $alert("上滑变绿色");
  3.     $id("panel0").set("background", "#00ff40");
  4. }

onswipedown事件

在该控件上下滑时触发。

用法

  1. <div id="panel0" ondoubletap="this.onswipedown()"/>
  1. function com$requirements$SignalController$onswipedown(sender, args){
  2.     $alert("下滑变紫色");
  3.     $id("panel0").set("background", "#8080ff");
  4. }

onswipleft事件

在该控件上左滑时触发。

用法

  1. <div id="panel0" ondoubletap="this.onswipleft()"/>
  1. function com$requirements$SignalController$onswipleft(sender, args){
  2.     $alert("双击变黄色");
  3.     $id("panel0").set("background", "#ffff00");
  4. }

onswipright事件

在该控件上右滑时触发。

用法

  1. <div id="panel0" ondoubletap="this.onswipright()"/>
  1. function com$requirements$SignalController$onswipright(sender, args){
  2.     $alert("右滑变黑色");
  3.     $id("panel0").set("background", "#000000");
  4. }

onlongclick事件

可以为支持长按事件的控件添加该事件，在长按该控件时触发。

用法

  1. <input id="button1" onlongclick="btnlongclick()" value="按钮" type="button"/>
  1. function btnlongclick(){
  2.     $alert("长按按钮");
  3. }

onload事件

可以为div、listview、flipper、picker等控件添加onload事件，在加载该控件时触发。

例如

  1. <listView id="listviewdefine0" bindfield="persons" onuprefersh="uprefersh()" linedelshow="true" ondownrefersh="downrefersh()" onload="listviewdefine0_onload()" onItemClick="rowclick()" onitemdelete="itemdelete()">
  2.     <div id="panel1">
  3.         <div id="panel2">
  4.             <div id="panel3">
  5.                 <image id="image0" bindfield="icon" scaletype="fitcenter" src="lss.png"/>
  6.                 <label id="label1" bindfield="name">name</label>
  7.             </div>
  8.             <div id="panel4"/>
  9.         </div>
  10.     </div>
  11. </listView>
  1. var i = 0;
  2. var len = 20;
  3. function listviewdefine0_onload(sender, args) {
  4.     var json = {
  5.         persons : []
  6.     };
  7.     for ( i = 0,
  8.     len = 20; i < len; i++) {
  9.         var person = {};
  10.         person["id"] = "100" + i.toString();
  11.         person["name"] = "联系人" + i.toString();
  12.         person["icon"] = "lss.png";
  13.         person["select"] = "false";
  14.         json.persons.push(person);
  15.     }
  16.     $ctx.push(json);
  17. }

onitemclick事件

可以为listview添加该事件，当点击列表的每一行时触发。

例如

  1. <listView id="listviewdefine0" bindfield="persons" onuprefersh="uprefersh()" linedelshow="true" ondownrefersh="downrefersh()" onload="listviewdefine0_onload()" onItemClick="rowclick()" onitemdelete="itemdelete()">
  2.     <div id="panel1">
  3.         <div id="panel2">
  4.             <div id="panel3">
  5.                 <image id="image0" bindfield="icon" scaletype="fitcenter" src="lss.png"/>
  6.                 <label id="label1" bindfield="name">name</label>
  7.             </div>
  8.             <div id="panel4"/>
  9.         </div>
  10.     </div>
  11. </listView>
  1. function rowclick(sender, args) {
  2.     var data = $id("listviewdefine0").get("row");
  3.     data = $stringToJSON(data);
  4.     $alert("name:" + data.name);
  5. }

onitemdelete事件

可以为listview添加该事件，当右滑弹出删除按钮点击删除时触发。

例如

  1. <listView id="listviewdefine0" bindfield="persons" onuprefersh="uprefersh()" linedelshow="true" ondownrefersh="downrefersh()" onload="listviewdefine0_onload()" onItemClick="rowclick()" onitemdelete="itemdelete()">
  2.     <div id="panel1">
  3.         <div id="panel2">
  4.             <div id="panel3">
  5.                 <image id="image0" bindfield="icon" scaletype="fitcenter" src="lss.png"/>
  6.                 <label id="label1" bindfield="name">name</label>
  7.             </div>
  8.             <div id="panel4"/>
  9.         </div>
  10.     </div>
  11. </listView>
  1. function itemdelete(sender, args) {
  2.     var row = $id("listviewdefine0").get("row");
  3.     delteRow($stringToJSON(row));
  4. }
  6. function delteRow(row) {
  7.     var sourceR = $ctx.getJSONArray("persons");
  8.     for (var i = 0; i < sourceR.length; i++) {
  9.         var group = sourceR[i];
  10.         if (group.id == row.id) {
  11.             sourceR.splice(i, 1);
  12.             break;
  13.         }
  14.     }
  15.     var json = {};
  16.     json["persons"] = sourceR;
  17.     $ctx.push(json);
  18. }

ondownrefersh事件

可以为listview添加该事件，当上拉列表刷新数据时触发。

例如

  1. <listView id="listviewdefine0" bindfield="persons" onuprefersh="uprefersh()" linedelshow="true" ondownrefersh="downrefersh()" onload="listviewdefine0_onload()" onItemClick="rowclick()" onitemdelete="itemdelete()">
  2.     <div id="panel1">
  3.         <div id="panel2">
  4.             <div id="panel3">
  5.                 <image id="image0" bindfield="icon" scaletype="fitcenter" src="lss.png"/>
  6.                 <label id="label1" bindfield="name">name</label>
  7.             </div>
  8.             <div id="panel4"/>
  9.         </div>
  10.     </div>
  11. </listView>
  1. function downrefersh(sender, args) {
  2.     var json = {
  3.         persons : []
  4.     };
  5.     for ( len = (len + 20); i < len; i++) {
  6.         var person = {};
  7.         person["id"] = "100" + i.toString();
  8.         person["name"] = "联系人" + i.toString();
  9.         person["icon"] = "lss.png";
  10.         json.persons.push(person);
  11.     }
  12.     $ctx.push(json);
  13. }

onuprefersh事件

可以为listview添加该事件，当下拉列表刷新数据时触发。

例如

  1. <listView id="listviewdefine0" bindfield="persons" onuprefersh="uprefersh()" linedelshow="true" ondownrefersh="downrefersh()" onload="listviewdefine0_onload()" onItemClick="rowclick()" onitemdelete="itemdelete()">
  2.     <div id="panel1">
  3.         <div id="panel2">
  4.             <div id="panel3">
  5.                 <image id="image0" bindfield="icon" scaletype="fitcenter" src="lss.png"/>
  6.                 <label id="label1" bindfield="name">name</label>
  7.             </div>
  8.             <div id="panel4"/>
  9.         </div>
  10.     </div>
  11. </listView>
  1. function uprefersh(sender, args) {
  2.     if (i - 40 >= 0) {
  3.         var json = {
  4.             persons : []
  5.         };
  6.         for ( i = (i - 40),
  7.         len = (len - 20); i >= 0 && i < len; i++) {
  8.             var person = {};
  9.             person["id"] = "100" + i.toString();
  10.             person["name"] = "联系人" + i.toString();
  11.             person["icon"] = "lss.png";
  12.             person["select"] = "false";
  13.             json.persons.push(person);
  14.         }
  15.         $ctx.push(json);
  16.     }
  17. }

onnextflipper事件

可以为viewflipper控件添加该事件，当滑到下一页的时候触发。

用法

  1. <flipper id="flipperdefine0" onnextflipper="next()" onpreviousflipper="previous()" viewindex="0">
  2.     <div id="panel1" title="页面1">
  3.         <div id="panel4"/>
  4.     </div>
  5.     <div id="panel2" title="页面2">
  6.         <div id="panel5"/>
  7.     </div>
  8.     <div id="panel3" title="页面3">
  9.         <div id="panel6"/>
  10.     </div>
  11. </flipper>
  1. function next(sender, args){
  2.     //获取当前是flipper的第几页
  3.     var i = $id("flipperdefine0").get("viewindex");
  4. }

onpreviousflipper事件

可以为viewflipper控件添加该事件，当滑到上一页的时候触发。

用法

  1. <flipper id="flipperdefine0" onnextflipper="next()" onpreviousflipper="previous()" viewindex="0">
  2.     <div id="panel1" title="页面1">
  3.         <div id="panel4"/>
  4.     </div>
  5.     <div id="panel2" title="页面2">
  6.         <div id="panel5"/>
  7.     </div>
  8.     <div id="panel3" title="页面3">
  9.         <div id="panel6"/>
  10.     </div>
  11. </flipper>
  1. function previous(sender, args){
  2.     //获取当前是flipper的第几页
  3.     var i = $id("flipperdefine0").get("viewindex"); 
  4. }

onintercepttouch、ontouch事件

可以为控件添加该事件，当按下并拖动控件时触发，可以拆分为DOWN、MOVE、UP、CANCEl四个动作。

用法

  1. <div id="panel0" onintercepttouch="onintertouch()">
  2.     <label id="label1">任意拖动以下控件</label> 
  3.     <div id="redpanel" ontouch="touch0()"/>
  4.     <div id="greenpanel" ontouch="touch1()"/>
  5.     <div id="bluepanel" ontouch="touch2()"/>
  6. </div>
  1. var w = -1;
  2. var ctl = "";
  4. var DOWN = 0;
  5. var UP = 1;
  6. var MOVE = 2;
  7. var CANCEL = 3;
  9. var isSelected = false;
  11. function onintertouch(sender, event) {
  12.     if (isSelected == false || ctl == "") {
  13.         return;
  14.     }
  15.     var x = event["x"];
  16.     var y = event["y"];
  17.     var what = event["what"];
  19.     if (what == DOWN) {
  20.         $id(ctl).set("opacity", "0.5");
  21.     }
  22.     if (what == MOVE) {
  23.         if (w == -1) {
  24.             w = $id(ctl).get("width") / 2;
  25.         }
  26.         $id(ctl).set("left", x - w + "px");
  27.         $id(ctl).set("top", y - w + "px");
  28.     }
  29.     if (what == UP) {
  30.         $id(ctl).set("opacity", "1");
  31.         isSelected = false;
  32.     }
  33. }
  35. function touch0(sender, event) {
  36.     ctl = sender;
  37.     isSelected = true;
  38. }
  40. function touch1(sender, event) {
  41.     ctl = sender;
  42.     isSelected = true;
  43. }
  45. function touch2(sender, event) {
  46.     ctl = sender;
  47.     isSelected = true;
  48. }

onsensorchanged事件

可以为window添加该事件，当传感器感知发生改变比如摇晃时触发

例如

  1. <window xmlns:web="http://www.yonyou.com/uapmobile/dsl" id="AboutCamera" onSensorChanged="shake()" controller="AboutCameraController" namespace="test.yyuap.com">
  2.     <import ref="AboutCamera.css" type="css"/>
  3.     <link type="text/css" href="sys/theme.css"/>
  4.     <div id="viewPage0">
  5.         <image id="image0" scaletype="fitcenter" src="picture"/>
  6.         <label id="label1">提示 : 摇一摇打开相册</label>
  7.     </div>
  8. </window>
  1. function shake(sender, args) {
  2.     $camera.openPhotoAlbum({
  3.         bindfield : "image",
  4.         callback : function() {
  5.             var img = $ctx.getString("image");
  6.             $id("image0").set("src", img);
  7.         }
  8.     })
  9. }

onkeydown事件

在window上增加onkeydown事件，可以在按back键时监听传参

例如

  1. <window xmlns:web="http://www.yonyou.com/uapmobile/dsl" id="Backspace_key1" onkeydown="this.onkeydown()" controller="Backspace_key1Controller" namespace="com.requirements">
  2.     <import ref="Backspace_key1.css" type="css"/>
  3.     <link type="text/css" href="sys/theme.css"/>
  4.     <input id="textbox0" bindfield="a" maxlength="256" placeholder="文本输入框" type="text"/>
  5.     <input id="textbox1" bindfield="b" maxlength="256" placeholder="文本输入框" type="text"/>
  6.     <input id="textbox2" bindfield="c" maxlength="256" placeholder="文本输入框" type="text"/>
  7.     <input id="button0" value="返回" onclick="this.button0_onclick()" type="button"/>
  8.     </div>
  9. </window>
  1. function com$requirements$Backspace_key1Controller$button0_onclick(sender, args) {
  2.     $ctx.dataCollect();
  3.     var json = $ctx.getJSONObject();
  4.     $alert(json);
  5.     $view.close({
  6.         "resultCode" : "15",
  7.         "data" : json//当前页面关闭时，把页面的数据传上个页面
  8.     })
  9. }//Onkeydown事件把返回逻辑拷贝过去即可
  10. function com$requirements$Backspace_key1Controller$onkeydown(sender, args) {
  11.     $ctx.dataCollect();
  12.     var json = $ctx.getJSONObject();
  13.     $alert(json);
  14.     $view.close({
  15.         "resultCode" : "15",
  16.         "data" : json//当前页面关闭时，把页面的数据传上个页面
  17.     })
  18. }
文档更新时间: 2018-05-08 13:42