服務項目
品牌網站建設

數字營銷

係統平台開發

數字產品

安全運維

Menu
官网开云
官网开云
微信小程序學習《二》:事件詳解
時間:2016-10-17 21:01:00

一、什麽是事件?

1.一種用戶的行為(wei)

用戶長按某一張圖片,點擊某個(ge) 按鈕,這就是用戶的行為(wei) ,也是事件

2.一種通訊方式

為(wei) 什麽(me) 說事件也是一種通訊方式呢?因為(wei) 用戶點擊按鈕的時候,這是發生在UI層的,我們(men) 的UI要把一些信息發送給我們(men) 的邏輯代碼,因此也是一種通訊方式


二、事件的類別

1.點擊事件tap

2.長按事件longtab

3.觸摸事件

(1)touchstart 開始觸摸

(2)touchend 結束觸摸

(3)touchmove 移動觸摸

(4)touchcancel取消觸摸

這裏就有個(ge) 問題了,結束觸摸和取消觸摸有什麽(me) 區別嗎?

結束觸摸可以理解為(wei) 是主動的停止的觸摸事件,比如我們(men) 正在移動一張圖片,移動完成後就是結束觸摸了,然後可能在移動的過程中,突然有事件來打斷了觸摸事件,比如電話來了,打斷了你的觸摸事件,這時候就是取消觸摸了

4.其他的觸摸事件 submit

每個(ge) 控件都有自己的事件


三、事件冒泡

了解什麽(me) 是冒泡事件?什麽(me) 是非冒泡事件?我們(men) 可以通過一個(ge) 例子來理解什麽(me) 是冒泡事件。

1.首先我們(men) 先修改下啟動界麵,啟動界麵創建三個(ge) view組件,分別給他們(men) 對應的樣式和綁定他們(men) 的點擊事件,且布局是一層嵌套一層的

2.然後在index.wxss文件中寫(xie) 下他們(men) 對應的樣式

3.在index.js文件中寫(xie) 對應的點擊事件,在控製台輸出對應的log

4.最後我們(men) 看下效果,仔細觀察可以看到,我們(men) 點擊界麵3的時候,控製台輸出了3行,分別是clickView1,clickView2,clickView3的點擊事件,點擊界麵2的時候,控製台輸出了clickView2和clickView1,這就說明了點擊子view的時候,也會(hui) 響應父view的事件,這就是冒泡事件了,相反的,點擊子view,父view不會(hui) 響應點擊事件,這就是非冒泡事件了。

那麽(me) 冒泡事件有哪些呢?

上麵所提到的點擊事件,長按事件,觸摸事件都是冒泡事件,其餘(yu) 的都是非冒泡事件


四、事件的綁定

1.bind

上麵的冒泡事件的例子就是使用bind的方式來綁定事件的

2.catch

那麽(me) catch綁定事件和bind的綁定事件有什麽(me) 不同呢?我們(men) 通過修改上麵的例子來說明,我們(men) 把view3的bindtap改為(wei) catchtap

然後我們(men) 看下運行的效果:

可以看到,我們(men) 使用catch的綁定事件後,點擊界麵3,是沒有觸發到父view的點擊事件的

總結:使用bind的綁定事件,是可以觸發冒泡事件的,就是可以觸發父view的事件 
使用catch是不會(hui) 觸發冒泡事件


Demo的下載地址:Demo2.zip

Kaiyun体育官方全站入口服務SERVICE
谘詢
微信掃碼谘詢
電話谘詢
400-888-9358