上次說了 條件渲染和列表渲染，這次來說說事件的冒泡與非冒泡。

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

.wxml頁面，綁定了一個showtxt變量，初始值為“我是 隻說代碼的大餅”,bindtap事件綁定了js中的對應方法bindPareantTap()、bindChildTap()：

.js文件中定義了showtxt變量和頁面要綁定的兩個方法bindPareantTap()、bindChildTap()：

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

.wxml頁面，綁定了一個showtxt變量，初始值為“我是 隻說代碼的大餅”,catchdtap事件綁定了js中對應方法catchPareantTap()、catchChildTap()：

.js文件中定義了showtxt變量和頁面要綁定的兩個方法bindPareantTap()、bindChildTap()：

運行效果：

總結：

bind綁定的事件會冒泡，catch 綁定的事件會阻止事件向上冒泡。

附加代碼：

<!--pages/059/bind_catch.wxml-->

<view>

<text>{{showtxt}}</text>

<view bindtap="bindPareantTap">

<image bindtap="bindChildTap" src="../../images/xiaochengxu03.png"></image>

</view>

</view>

<view>我是分割線</view>

<view>

<view catchdtap="catchPareantTap">

<image catchtap="catchChildTap" src="../../images/xiaochengxu03.png"></image>

</view>

</view>

/**

* 頁面的初始數據

*/

data: {

showtxt:"我是 隻說代碼的大餅",

},

/**父事件**/

bindPareantTap:function(){

this.setData({

showtxt:"我是父事件"

})

console.log("bind parent");

},

bindChildTap:function(){

this.setData({

showtxt:"我是子事件"

})

console.log("bind child");

},

catchPareantTap:function(){

this.setData({

showtxt:"catch 父"

})

console.log("catch 父");

},

/**catch 子**/

catchChildTap:function(){

this.setData({

showtxt:"catch 子"

})

console.log("catch 子");

},

謝謝浏覽，謝謝點贊和評論，喜歡的關注下呗，一起學習。

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!