微信小程序(事件对象-绑定、冒泡、捕获)

原生组件
原小程序中的部分组件是由客户端创建的生组件,包含:
1.camera 2.canvas 3.input(仅在focus时表现为原生组件) 4.map 5.textarea 6.video
事件冒泡


  

#parent{
  width: 200rpx;
  height: 200rpx;
  background: pink;
}
#child{
  width: 100rpx;
  height: 100rpx;
  background: lemonchiffon;
}
parentFn(event){
    console.log(event)
  },
  childFn(event){
    console.log(event)
  },

效果如下:
微信小程序(事件对象-绑定、冒泡、捕获)_第1张图片
当点击子级时:
微信小程序(事件对象-绑定、冒泡、捕获)_第2张图片
发现事件发生冒泡,点击子级时,除了触发了子级事件,还会冒泡到父级,触发父级绑定的事。

当点击父级时:(只会触发父级绑定的事件)
微信小程序(事件对象-绑定、冒泡、捕获)_第3张图片
target和currentTarget 属性的区别
event.target返回触发事件的元素
event.currentTarget返回绑定事件的元素
例如:事件冒泡到父级时:
触发事件源头为child,然后冒泡至parent,所以event.target为触发事件的元素,event.currentTarget为绑定事件的元素。微信小程序(事件对象-绑定、冒泡、捕获)_第4张图片
通俗理解:
currentTarget为当前事件所绑定的组件
target是触发该事件的源头组件
事件对象
当事件回调触发的时候,逻辑层绑定该事件的处理函数会收到一个事件对象,对象的详细属性如下,
微信小程序(事件对象-绑定、冒泡、捕获)_第5张图片
事件对象event
在这里插入图片描述
touches 是一个数组,每个元素为一个 Touch 对象(canvas 触摸事件中携带的 touches 是 CanvasTouch 数组)。 表示当前停留在屏幕上的触摸点。
微信小程序(事件对象-绑定、冒泡、捕获)_第6张图片
在这里插入图片描述
changedTouches 数据格式同 touches。 表示有变化的触摸点,如从无变有(touchstart),位置变化(touchmove),从有变无(touchend、touchcancel)。
在这里插入图片描述
微信小程序(事件对象-绑定、冒泡、捕获)_第7张图片
在这里插入图片描述
微信小程序(事件对象-绑定、冒泡、捕获)_第8张图片
事件对象event之dataset注意项:
在组件节点中可以附加一些自定义数据。这样,在事件中可以获取这些自定义的节点数据,用于事件的逻辑处理。
在 WXML 中,这些自定义数据以 data- 开头,多个单词由连字符 - 连接。这种写法中,连字符写法会转换成驼峰写法,而大写字符会自动转成小写字符。如:
data-element-type ,最终会呈现为 event.currentTarget.dataset.elementType ;
data-elementType ,最终会呈现为 event.currentTarget.dataset.elementtype

阻止冒泡:
bind事件绑定不会阻止冒泡事件向上冒泡,catch事件绑定可以阻止冒泡事件向上冒泡。
在这里插入图片描述
使用catch事件绑定后,此时点击子级区域,便不会在冒泡到父级区域。
微信小程序(事件对象-绑定、冒泡、捕获)_第9张图片
微信小程序(事件对象-绑定、冒泡、捕获)_第10张图片

事件捕获
事件流包含事件冒泡与捕获,通过bind绑定会发生冒泡,catch则会阻止冒泡传播。触摸类事件开始支持捕获阶段。
事件捕获,明确几点:
1.捕获阶段位于冒泡阶段之前
2.绑定语法capture-bind、capture-catch

简单测试:


  

#box{
  width: 200rpx;
  height: 200rpx;
  background: powderblue;
}
#boxChild{
  width: 100rpx;
  height: 100rpx;
  background: peachpuff;
}
boxFn1(event){
    console.log("fn1")
  },
  boxFn2(event){
    console.log("fn2")
  },
  fn3(event){
    console.log("fn3")
  },
  fn4(event) {
    console.log("fn4")
  },

微信小程序(事件对象-绑定、冒泡、捕获)_第11张图片
此时再电机加子级区域触发顺序为如下:
微信小程序(事件对象-绑定、冒泡、捕获)_第12张图片
由此验证出捕获优先级高于冒泡。
注意:捕获阶段要求bind和catch后紧跟一个冒号,如bind:tap、catch:touchstart

你可能感兴趣的:(微信小程序(事件对象-绑定、冒泡、捕获))