小程序-事件

(文章不囉嗦,爲的是最高效率解決問題)
基於小程序官方文檔進行解析

什麼是事件?,事件的使用方式?
看官方文檔https://developers.weixin.qq....

本文重點來了
事件分類
事件分爲冒泡事件和非冒泡事件：

1. 冒泡事件：當一個組件上的事件被觸發後，該事件會向父節點傳遞。 
2. 非冒泡事件：當一個組件上的事件被觸發後，該事件不會向父節點傳遞。

上面是定義,小程序的冒泡事件在文檔裏面也寫的很清楚了,重點是這句

bind事件綁定不會阻止冒泡事件向上冒泡，catch事件綁定能夠阻止冒泡事件向上冒泡。

如在下邊這個例子中，點擊 inner view 會前後調用handleTap3和handleTap2(由於tap事件會冒泡到 middle
 view，而 middle view 阻止了 tap 事件冒泡，再也不向父節點傳遞)，點擊 middle view 會觸發handleTap2，
點擊 outer view 會觸發handleTap1。

<view id="outer" bindtap="handleTap1">
  outer view
  <view id="middle" catchtap="handleTap2">
    middle view
    <view id="inner" bindtap="handleTap3">
      inner view
    </view>
  </view>
</view>

使用環境例子:模擬個狀況就是在小程序裏若是我想要作一個非滿屏的浮層,點擊空白處關閉,利用事件冒泡和非冒泡就很好的解決了問題.

事件另外一個就是捕獲,官方版本1.5.0後支持

在下面的代碼中，點擊 inner view 會前後調用handleTap二、handleTap四、handleTap三、handleTap1。

<view id="outer" bind:touchstart="handleTap1" capture-bind:touchstart="handleTap2">
  outer view
  <view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4">
    inner view
  </view>
</view>

捕獲階段位於冒泡階段以前，且在捕獲階段中，事件到達節點的順序與冒泡階段剛好相反
採用的是capture-bind、capture-catch關鍵字,並且捕獲是先於冒泡,也就是說你再點擊子元素時,冒泡是子元素到父元素的順序,而捕獲是父元素到子元素的順序,而bind和capture-bind不會阻止冒泡捕獲,cacth和capture-catch會阻止,(事件終結者有木有).