WeChat小程序学习心得——冒泡事件

在index.wxml下生成3个view

<view>
view11
  <view>
  view22
    <view >
      view33
    </view>
  </view>
</view>

并用bindtap为其绑定点击事件（以view11为例）

<view bindtap='view1click'>

在index.js中编写绑定事件的方法体，并传入event参数（以view1为例）

view1click: function(event) {
    console.log("view1click");
    console.log(event);
  }

当给3个view有绑定上各自的点击事件之后，点击view

因为3个view有父子辈关系，所以点击孙子的时候就会同时点击父辈，祖父辈，产生冒泡事件

（点击事件，长按事件，和触摸事件都是冒泡事件）

打开consol，查看event的属性

其中，currentTarget是当前点击的view即绑定事件的view，target是目标view，即发生事件的view

还有一个重要的属性dataset，主要是方便给view添加上自定义的属性和view

这里以view11为例，给dataset添加title和id

<view bindtap='view1click' id='view1' data-title="新闻标题" data-id='100'>

此外，绑定事件除了可以通过bind之外，还可以通过catch来绑定。

区别就是catch绑定的事件不会触发冒泡事件

详细代码可以去我上传的资源中下载