.tutorial-page{flex-direction:column;}说到事件，做前端开发的朋友一定不陌生。事件，即网页上的一系列行为，可以是浏览器行为，如页面完成、页面关闭；或者是用户操作行为，比如用户输入操作，用户点击按钮等，这些行为会被JavaScript监听并执行相应的逻辑代码。可以说，前端的交互行为与事件机制息息相关。对于前端开发者来说，掌握事件机制是绝对必要的。所谓组件，就是封装的具有独立功能的UI组件。试想，如果你开发一个复杂的页面，开发者把所有的UI部分都写在一个文件里，这样的代码显然可维护性很低。但是如果我们用组件来重新思考UI的构成，将UI上具有相对独立功能的各个模块定义为组件，然后通过组合或者嵌套的方式将小的组件组??合成大的组件，进而完成整个UI的开发。这样一来，我们不仅提高了代码的复用性，而且整体结构清晰，可维护性大大提高。基于组件的接口本文将介绍快应用开发中与事件相关的主要API，以及事件监听和触发机制，同时介绍快应用中的组件是如何通信的。在阅读本文之前，建议先了解一下快应用的基础知识。自定义事件的监听、移除和触发$on用于监听自定义事件；$off移除相应的事件监听器；$emit()、$dispatch()、$broadcast()等方法可以用来触发事件。$on(evtName,fnHandler)事件注册当前页面的监听事件，可以监听$emit()、$dispatch()、$broadcast()等触发的自定义事件，不能用于注册组件节点事件响应。示例如下：exportdefault{onInit(){this.$on('customEvtType1',this.customEvtType1Handler)},customEvtType1Handler(evt){//事件类型，事件参数console.info(`Triggerevent:type:${evt.type},parameter:${JSON.stringify(evt.detail)}`);}}说明'customEvtType1'是这个组件上的自定义事件名称，customEvtType1Handler是'customEvtType1时要执行的'事件触发回调。$off(evtName,fnHandler)删除事件侦听器。参数fnHandler是可选的。如果通过，则只会移除指定的响应函数。如果不通过，将移除此事件的所有侦听器。示例如下：exportdefault{removeEventHandler(){//不传fnHandler：移除所有监听this.$off('customEvtType1')//传fnHandler：移除指定监听函数this.$off('customEvtType1',this.customEvtType1Handler)}}页面交互可能会遇到一些非手动触发的需求，$emit()在当前实例上触发事件，实现动态触发事件的行为，类似于jquery中的trigger方法。$emit(evtName,evtDetail)触发当前实例的事件监听函数，与$on()配合使用。注意：$emit()目前只触发$on监听的事件。示例如下：exportdefault{emitEvent(){this.$emit('customEvtType1',{params:'parametercontent'})}}监听原生组件事件原生组件是框架自带的组件，比如div,text等，它支持一系列事件，例如通用事件（如：点击、消失）、组件特定事件（如：焦点）。完整的原生组件和事件列表可以在快应用官网找到。开发者可以在事件回调函数中获取当前触发组件的信息，进行进一步的操作。执行响应函数时通过target获取，如：onClickHandler绑定响应函数时传递参数，如：onClickHandler2示例如下：组件节点1组件节点2
