onEvent(id, type, callback) 事件捕捉

功能分类： UI Controls Applab JavaScript 少儿编程

当指定 id 控件 type 类型的事件触发时，执行 callback 回调函数。

App 应用里的互动操作依赖两个因素，一个是页面上显示的控件（如 button()、textInput()、textLabel()、dropDown()、checkbox()、radioButton()、image()），另一个因素则是交互时用户对控件所做的不同类型操作事件。而在使用 onEvent 方法之前，指定 id 唯一标识的控件需要已经被创建。

示例代码


// 每点击按钮一次，就向前移动一步
button("forward", "Move Forward");
onEvent("forward", "click", function(event) {
  moveForward();
});

示例代码：两种不同的事件类型 每点击按钮一次，就向前移动一步；按下键盘任意键，就向后移动一步


// 每点击按钮一次，就向前移动一步；
// 按下键盘任意键，就向后移动一步
button("move", "Move");
onEvent("move", "click", function(event) {
  moveForward();
});
onEvent("move", "keypress", function(event) {
  moveBackward();
});

示例代码：事件详细信息 在控制台显示出传递给 callback 回调函数的 event 参数信息


// 在控制台显示出传递给 callback 回调函数的 event 参数信息
button("data", "Show Me Event Details");
onEvent("data", "click", function(event) {
  console.log(JSON.stringify(event));
});

示例代码：缩小与放大 当光标移动到图片上时放大图片，当光标从图片上离开时，设置回原来大小


// 当光标移动到图片上时放大图片，当光标从图片上离开时，设置回原来大小
image("logo", "https://xiaowai.co/images/logo.png");
setPosition("logo", 160, 240, 32, 32);

onEvent("logo", "mouseover", function(event){
  setSize("logo", 48, 48);
});

onEvent("logo", "mouseout", function(event){
  setSize("logo", 32, 32);
});

示例代码：在什么位置显示图片？ 在文本框里输入图片显示的横轴及纵轴坐标，并按输入位置显示图片。注意在这个例子里定义了一个回调函数，被两个类型的事件调用。


// 在文本框里输入图片显示的横轴及纵轴坐标，并按输入位置显示图片。
// 注意在这个例子里定义了一个回调函数，被两个类型的事件调用。
textLabel("xLabel", "X coordinate:");
textInput("xCoordinate", 160);
textLabel("yLabel", "Y coordinate:");
textInput("yCoordinate", 240);
image("logo", "https://xiaowai.co/images/logo.png");
setPosition("logo", 160, 240, 32, 32);

onEvent("xCoordinate", "change", moveFromText);
onEvent("yCoordinate", "change", moveFromText);

// 定义了一个回调函数，根据文本框里输入的位置设置图片显示位置
function moveFromText() {
  var x = getText("xCoordinate");
  var y = getText("yCoordinate");
  setPosition("logo", x, y);
}

语法规则


onEvent(id, type, function(event) {
  // 在这里写事件触发后要执行的代码
});

参数说明

名称	类型	必需	参数描述
id	string	Yes	指定事件处理相关控件的 id 唯一标识。必须以字母开头，不能包含空格，可以包含字母、数字、减号 - 以及下划线 _ 。
type	string	Yes	执行响应的事件类型。有很多种不同的事件类型对应不同的用户操作，在事件处理中可分别对其进行相应的响应处理。在编写代码时，你可以在一个下拉选框中选择超过 10 种这些不同的事件类型。在这个列表的下方我们列出了最常被用到的几种。
callback	function	Yes	当指定 `id` 控件 `type` 类型的事件触发时，要执行的 `callback` 回调函数。这个回调函数可以是一个内联函数，也可以是在应用程序中单独定义并被调用的函数。

事件类型	事件描述
change	相关控件里内容被改变，并且用户从该控件离开时。
click	用户点击相关控件。
mouseover	用户鼠标移动到相关控件上。
keydown	某个键盘按键被按下。

返回值

没有返回值，会执行 callback 回调函数。

提示说明

在使用 onEvent() 进行事件处理之前，相关的控件必须在这之前已被创建。
一个包含事件信息的 event 参数会在事件触发后传递给回调函数。通过这个参数，在回调函数里可以获取更多跟事件有关的信息。
在 Applab 里，你可以忽略类似这样的警告信息：event is defined but not called in your program。
在代码里，一个可以参考的做法是将变量声明及屏幕控件有关的代码放在顶部，事件处理相关代码放在中间，其他代码放置在底部。
使用 onBoardEvent() 方法捕捉主板组件事件。

查看更多少儿编程教程、JavaScript 介绍