冒泡事件和捕获事件

• 冒泡事件是从内到外，从小到大进行

• 捕获事件是从外向内，从大到小

  冒泡事件bindtap

  <view id="one" class="one" bindtap="_h1">
  one
   <view id="two" class="two" bindtap="_h2">
   two
       <view  id="three" class="three" bindtap="_h3">
       three
       </view>
   </view>
  </view>
  

  .one{
    width: 200px;
    height: 200px;
    background-color: forestgreen;
  }
  .two{
    width: 100px;
    height: 100px;
    background-color: fuchsia;
  }
  .three{
    width: 50px;
    height: 50px;
    background-color: gainsboro;
  }
  

  ...
  _h1:function(evt){
    console.log('_h1',evt)
  },
  _h2:function(evt){
    console.log('_h2',evt)
  },
  _h3:function(evt){
    console.log('_h3',evt)
  },
  ...
  

• 测试 点击 three区域，事件会从内到外，从小到大进行传递,Console`控制台显示

捕获事件capture-bind:tap

<view id="one" class="one" capture-bind:tap="_h1">
one
   <view id="two" class="two" capture-bind:tap="_h2">
   two
       <view  id="three" class="three" capture-bind:tap="_h3">
       three
       </view>
   </view>
</view>

.one{
    width: 200px;
    height: 200px;
    background-color: forestgreen;
}
.two{
    width: 100px;
    height: 100px;
    background-color: fuchsia;
}
.three{
    width: 50px;
    height: 50px;
    background-color: gainsboro;
}

...
_h1:function(evt){
    console.log('_h1',evt)
},
_h2:function(evt){
    console.log('_h2',evt)
},
_h3:function(evt){
    console.log('_h3',evt)
},
...

• 测试 点击 three区域，事件会从外到到，从大到小进行传递,Console`控制台显示
  

非冒泡事件和捕获阻止事件

非冒泡事件catchtap

<view id="one" class="one" bindtap="_h1">
one
   <view id="two" class="two" catchtap="_h2">
   two
       <view  id="three" class="three" catchtap="_h3">
       three
       </view>
   </view>
</view>

.one{
    width: 200px;
    height: 200px;
    background-color: forestgreen;
}
.two{
    width: 100px;
    height: 100px;
    background-color: fuchsia;
}
.three{
    width: 50px;
    height: 50px;
    background-color: gainsboro;
}

...
_h1:function(evt){
    console.log('_h1',evt)
},
_h2:function(evt){
    console.log('_h2',evt)
},
_h3:function(evt){
    console.log('_h3',evt)
},
...

• 测试 点击 three区域，事件从内到外传递被阻止,Console控制台显示

捕获阻止事件capture-catch:tap

<view id="one" class="one" capture-catch:tap="_h1">
one
   <view id="two" class="two" capture-catch:tap="_h2">
   two
       <view  id="three" class="three" capture-catch:tap="_h3">
       three
       </view>
   </view>
</view>

.one{
    width: 200px;
    height: 200px;
    background-color: forestgreen;
}
.two{
    width: 100px;
    height: 100px;
    background-color: fuchsia;
}
.three{
    width: 50px;
    height: 50px;
    background-color: gainsboro;
}

...
_h1:function(evt){
    console.log('_h1',evt)
},
_h2:function(evt){
    console.log('_h2',evt)
},
_h3:function(evt){
    console.log('_h3',evt)
},
...

• 测试 点击 three区域，事件从外到内传递被阻止,Console控制台显示

互斥事件(mut-bind:tap)

<view id="one" class="one" bindtap="_h1">
one
   <view id="two" class="two" mut-bind:tap="_h2">
   two
       <view  id="three" class="three" mut-bind:tap="_h3">
       three
       </view>
   </view>
</view>

.one{
    width: 200px;
    height: 200px;
    background-color: forestgreen;
}
.two{
    width: 100px;
    height: 100px;
    background-color: fuchsia;
}
.three{
    width: 50px;
    height: 50px;
    background-color: gainsboro;
}

...
_h1:function(evt){
    console.log('_h1',evt)
},
_h2:function(evt){
    console.log('_h2',evt)
},
_h3:function(evt){
    console.log('_h3',evt)
},
...

• 测试 点击 three区域，互斥事件绑定 一个 mut-bind 触发后，如果事件冒泡到其他节点上，其他节点上的 mut-bind 绑定函数不会被触发，但 bind 绑定函数和 catch 绑定函数依旧会被触发，Console控制台显示