介紹三種小程式事件

本文介紹微信小程式事件如何使用。

1：事件冒泡

在微信小程式開發工具中，新event資料夾，新文件，在event.wxml中填寫以下程式碼：

1. <view  class="view1"  bindtap="view1click"  id="view1" data-title="新闻标题"  data-id="100">
     这里是view 1
       <view class="view2" bindtap="view2click" id="view2">
            这里是view 2
             <view class="view3" bindtap="view3click" id="view3">
                  这里是view 3
             </view>
       </view>
   </view>

   登入後複製

在event.wxss

.view1{
  height: 500rpx;
  width: 100%;
  background-color:beige;
}
.view2{
  height: 400rpx;
  width: 80%;
  background-color: red;
}

1. .view3{
     height: 300rpx;
     width: 60%;
     background-color:aqua;
   }

   登入後複製

在event.js中增加以下程式碼：

1. //事件处理函数
     view1click : function(event){
       console.log("view1click")
     },
     view2click : function(){
       console.log("view2click")
     },
     view3click : function(event){
        console.log("view3click")
     },

   登入後複製

#編譯並執行，然後在模擬器中點選view3區域結果如圖1所示：可以看到，除了view3之外，view2和view1的點擊事件都回應了，這就是點擊事件冒泡

圖1

#2：阻止事件冒泡

#將

1. #

   <view class="view3" bindtap="view3click" id="view3">

   登入後複製

改為

1. <view class="view3" catchtap="view3click" id="view3">

   登入後複製

---即修改為：catchtap

其他程式碼不變，編譯運行，還是點擊view3區域，查看日誌訊息，如圖2所示，事件不再冒泡

圖2

#3：事件訊息傳入

上述程式碼中：view1click : function(event)增加列印傳入的event事件資訊程式碼如下：編譯運算如圖3所示：

1. view1click : function(event){
       console.log("view1click")
       console.log(event)
     }

   登入後複製

圖3

##其中dataset中為自訂的

<view  class="view1"  bindtap="view1click"  id="view1" data-title="新闻标题"  data-id="100">

1. 特別推薦：「php程式設計師工具箱」V0.1版本下載

#2. 微信小程式完整原始碼下載

3. 微信小程式demo：仿商城