# 事件

事件管理器从属于元素，提供给组件的设计者一个向使用者派发事件的手段。

事件有两种使用方式，一种是走传统的脚本逻辑，一种是用小程序在wxml中的事件绑定。

# 脚本逻辑

在脚本中使用事件很简单，用一段代码例子来解释：

// 定义监听器，比如这个事件的参数类型是`number`
function handleTest(params: number, sender: XrFrame.Element) {
  console.log('test', params, sender);
}

// 添加事件监听器
el.event.add('test', handleTest);

// 移除事件监听器
el.event.remove('test', handleTest);

// 添加事件监听器，但会在一次触发后自动移除
el.event.addOnce('test', handleTest);

# wxml绑定

在wxml中进行事件绑定会稍微复杂一些，还是来看个例子：

<xr-scene bind:tick="handleTick">
</xr-scene>

这里我们给xr-scene标签绑定了tick事件，事件的handler被定义在组件的method内，和其他的小程序组件一致。

这里要注意的是如此绑定的事件获取事件参数的方法不同：

handleTick: function(event) {
  const {value, el} = event.detail;
}

这里取出的value就是事件的参数，el则是派发事件的那个元素。

# 派发事件

知道了如何监听事件，我们还需要知道如何派发，依照以上两种监听方式，事件的触发有不同参数：

el.event.trigger(type, event, immediately, toXML, bubbles);

immediately是指是否要立即触发，默认是true，如果为false，则会对当帧同名的事件进行合并，然后在当帧组件生命周期的驱动前派发。

toXML是说这个事件是否要派发到xml上，来允许开发者使用事件绑定，默认是true。

bubbles是指事件是否要沿着xr-frame的节点树冒泡，同时也会影响在xml中的冒泡。

注意在Shadow元素的子孙元素中，如果要让事件能够在xml中被绑定，bubbles必须为true。