拓展:
原生组件
小程序中的部分组件是由客户端创建的原生组件,包含:
①camera
②canvas
③input(仅在focus时表现为原生组件)
④map
⑤textarea
⑥video
一·事件冒泡
①事件触发验证
<view id="parent" bindtap="parentFn"> <view id="child" bindtap="childFn"></view></view>#parent{ width: 100%; height:300rpx; background: green;}#child{ width: 200rpx; height: 200rpx; background: orange;}/** * any */ parentFn(option){ console.log(option) }, childFn(option) { console.log(option) },
②事件冒泡验证-----点击子元素
------------点–击--父–元--素------------
拓展: target和currentTarget 属性的区别
1)
event.target返回触发事件的元素----触发事件的元素
event.currentTarget返回绑定事件的元素----绑定的元素出发

:触发事件源头为child,然后冒泡至parent,所以event.target为触发事件的元素,event.currentTarget为绑定事件的元素。
2)
currentTarget为当前事件所绑定的组件
target是触发该事件的源头组件
二·事件对象
当事件回调触发的时候,逻辑层绑定该事件的处理函数会收到一个事件对象,对象的详细属性:
二-----1)事件对象event
①—touches
touches 是一个**数组,**每个元素为一个 Touch 对象(canvas 触摸事件中携带的 touches 是 CanvasTouch 数组)。 表示当前停留在屏幕上的触摸点。

②—changedTouches
changedTouches 数据格式同 touches。 表示有变化的触摸点,如从无变有(touchstart),位置变化(touchmove),从有变无(touchend、touchcancel)。
③—target


④—currentTarget


★★★dataset注意项★★★
①:在组件节点中可以附加一些自定义数据。这样,在事件中可以获取这些自定义的节点数据,用于事件的逻辑处理。
②:在 WXML 中,这些自定义数据以 data- 开头,多个单词由连字符 - 连接。这种写法中,连字符写法会转换成驼峰写法,而大写字符会自动转成小写字符。
<view id="parent" bindtap="parentFn" data-index-type="age"></view>
三·事件冒泡
阻止冒泡:
bind事件绑定不会阻止冒泡事件向上冒泡,
catch事件绑定可以阻止冒泡事件向上冒泡。
四·事件捕获
事件流包含事件冒泡与捕获,通过bind绑定会发生冒泡,catch则会阻止冒泡传播。但是自基础库版本 1.5.0 起,触摸类事件开始支持捕获阶段。
事件捕获,首先要明确几点
①捕获阶段位于冒泡阶段之前
②绑定语法capture-bind、capture-catch
注意:捕获阶段要求bind和catch后紧跟一个冒号,如bind:tap、catch:touchstart
课堂总结
事件绑定、冒泡、捕获总结
(1)原生组件
(2)事件冒泡
(3)事件对象
(4)事件捕获













