事件 小程式事件型別及繫結說明

2022-07-28 10:15:26 字數 1672 閱讀 9659

1. 事件分為兩類:

a) 冒泡事件

b) 非冒泡事件:

除上表之外的其他元件自定義事件如無特殊宣告都是非冒泡事件

2. 事件繫結(bind、catch)

事件繫結有兩種方式:

a) 以bind+事件名稱,或 bind: + 事件名稱,比如: bindtap 等同於 bind:tap,這種方式不會阻止事件向上冒泡。

b) 以catch+事件名稱,或catch: + 事件名稱,比如: catchtap 等同於 catch:tap,這種方式會阻止事件向上冒泡。

當元件觸發事件時傳遞event引數,比如:

<

view

bind:tap

="sample"

>單擊我

view

>

1

page(

5 })

事件處理函式: sample會收到乙個引數event,event相關資料見:

3. 事件的捕獲(capture-bind 、 capture-catch)

事件的捕獲優先在事件之前觸發,捕獲順序與冒泡是相反的,以下**中點選 inner view 會先後呼叫handletap2、handletap4、handletap3、handletap1。

1

<

view

id="outer"

bind:touchstart

="handletap1"

capture-bind:touchstart

="handletap2"

>

2outer view

3<

view

id="inner"

bind:touchstart

="handletap3"

capture-bind:touchstart

="handletap4"

>

4inner view

5view

>

6view

>

capture-catch 將中斷捕獲階段和取消冒泡階段,以下**中的將只觸發handletap2。

1

<

view

id="outer"

bind:touchstart

="handletap1"

capture-catch:touchstart

="handletap2"

>

2outer view

3<

view

id="inner"

bind:touchstart

="handletap3"

capture-bind:touchstart

="handletap4"

>

4inner view

5view

>

6view

>

微信小程式 template新增繫結事件

對於模板的使用,我是想將模板的事件單獨出來,其他引用模板的頁面中不再摻雜模板事件,比較方便管理,如果還有其他好的解決辦法,請賜教。template.wxml bindtap clickview class tempclass temp模板view template.js var temp expor...

事件排程器建立 繫結事件及呼叫

1 事件排程器建立 新建乙個藍圖類或者控制項藍圖,新增事件排程器,如果要新增的事件列表中需要輸入引數,在事件排程器的編輯輸入值選項,點新來建立。建立ui u2 u3三個控制項藍圖。每個控制項藍圖新增了乙個按鈕作為標識,具體操作中為自己建立的藍圖類。2 繫結事件到事件排程器 跨藍圖或者自身都可以 給u...

小程式點選事件

普通點選事件 bindtap 要放在前面,放在後面不好使 bindtap 會有冒泡事件 catchtap 不會有冒泡事件 1 2 view 3 button type warn size mini bindtap dian 點老子呀 button 4view 56 view 花木蘭 小程式傳值 da...