概述
更新时间：
通过在 UI 组件上绑定事件，开发者可以实现蓝河应用与用户之间的交互。
绑定事件
用法上，开发者可以使用 on (可以用@简写代替) 来绑定事件，如：onclick,onchange 可简写成 @click,@change，并在事件触发时执行对应的 JavaScript 业务代码。
示例如下
<template>
<div class="tutorial-page">
<text id="elNode1" class="{{ elClassName + 1 }}" disabled="false" onclick="onClickHandler"
>组件节点1</text
>
<text
id="elNode2"
class="class-static-1 {{ elClassName + 2 }}"
onclick="onClickHandler2('参数1', argName)"
>组件节点2</text
>
</div>
</template>
<style lang="less">
.tutorial-page {
flex-direction: column;
}
</style>
<script>
export default {
data: {
elClassName: 'class-dynamic',
argName: '动态参数',
},
onClickHandler(evt) {
// 事件类型，参数详情
console.info(`触发事件：类型：${evt.type}, 详情： ${JSON.stringify(evt.detail)}`)
if (evt.target) {
console.info(`触发事件：节点：${evt.target.id}, ${evt.target.attr.disabled}`)
}
},
onClickHandler2(arg1, arg2, evt) {
// 事件类型，事件参数，target
console.info(`触发事件：类型：${evt.type}, 参数： ${arg1}, ${arg2}`)
},
}
</script>复制代码
事件传参
UI 组件可以向绑定的事件方法传递自定义参数。
示例如下
<template>
<div class="demo-page">
<text for="{{list}}" key="{{$idx}}" onclick="handle($idx,$item,total)">{{$item}}</text>
</div>
</template>
<script>
export default {
data: {
list: [1, 2, 3, 4, 5],
total: 0,
},
handle(idx, item, total, $evt) {
console.log(idx)
console.log(item)
console.log(total)
console.log($evt)
},
}
</script>复制代码
回调函数被调用时，会在参数列表末尾自动添加一个 evt 参数，通过 evt 参数开发者可以访问回调事件相关上下文数据。
UI 组件还支持许多其他的事件绑定，如果您想进一步了解，请移步通用事件。