事件监听与触发
更新时间：
了解事件监听 API，如何触发 ViewModel 的事件、组件节点的事件
注：本节描述的均为当前页面实例中的事件监听与触发，如需了解父子组件实例间事件监听与触发，可参见组件。
监听原生组件事件
原生组件支持一系列事件，如通用事件（如：click ）、组件专有事件（如：change）；
很多开发者希望能够在事件回调函数中，获取到当前触发事件的组件信息，并进行进一步的操作，那么办法有以下多种，如下代码所示：
- 在响应函数执行时通过 target 获取，如：
onClickHandler - 在响应函数绑定时传递参数，如：
onClickHandler2
通用事件简写
如：onclick,onchange 可简写成 @click,@change
示例如下：
<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>复制代码