赞
踩
文档地址:事件 | 微信开放文档
事件分为冒泡事件和非冒泡事件:
冒泡事件:当一个组件上的事件被触发后,该事件会向父节点传递。bind
非冒泡事件:当一个组件上的事件被触发后,该事件不会向父节点传递。catch
pages\home\home.wxml
<view bindtap="handleClick1"> <!-- bindTop绑定点击冒泡事件 --> <button bindtap="handleClick">按钮点击</button> <!-- catchtap绑定点击非冒泡事件 --> <button catchtap="handleClick">按钮点击</button> </view> <!-- 多个事件绑定触发 --> <button type="warn" catchtouchstart="handleStart" catchtouchend="handleEnd">放个大招</button>
pages\home\home.js
handleClick(){ console.log('按钮被点击了'); }, handleClick1(){ console.log('view被点击了'); }, handleStart(){ console.log('开始蓄力'); }, handleEnd(){ console.log('蓄力完毕,发动成功'); },
当组件触发事件时,逻辑层绑定该事件的处理方法会收到一个事件对象。通过此对象来进行小程序的自定义事件参数据传递。
事件对象在小程序中是非常有意义的,这点与vue和react不同。在小程序中,事件对象是给事件处理程序传递参数的唯一方式。
BaseEvent基础事件对象属性列表:
属性 | 类型 | 说明 |
---|---|---|
type | String | 事件类型 |
target | Object | 触发事件的组件的一些属性值集合 |
currentTarget | Object | 当前组件的一些属性值集合 |
注意点:target属性与currentTarget,在部分场景下是一样的,当然也存在不一样的情况。假定事件绑定在父上:
如果父不存在子组件(标签)并或子没标签之间内容的时候,两者一样
如果父存在子组件(标签)并且子有属性的时候,则两者不一样
在小程序中,如果希望在视图结构中通过事件给事件对象传递参数,则可以在标签上使用data-数据名=“数据值”
的形式传递,例如参考代码:
<!-- 事件传递参数 --> <button bindtap="handleClick" data-num="111">按钮点击</button>
// 接收参数 /** * 事件对象获取 * 所有的事件处理程序都有一个默认的参数,这个参数就是事件对象 */ handleClick(event) { console.log(event); // 接收事件组件/标签自己的数据 console.log(event.currentTarget.dataset.efg); // 获取事件组件/标签子的数据 console.log(event.target.dataset.abc); }
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。