微信小程序 筆記4事件

目錄

事件綁定

獲取元素上的數據

事件冒泡和事件捕獲

什麼是事件冒泡？

出現事件冒泡的情況

事件冒泡解決

target和currentTarget區別

一些補充

---

事件綁定

下面這兩種意義相同

<!--my.wxml-->]
<view bindtap="tapfun">請點擊</view>
<view bind:tap="tapfun">請點擊</view>

//my.js部分
tapfun:function(){
    console.log("執行tapfun()")
  },

獲取元素上的數據

我們能捕獲到點擊事件還不夠,我們在點擊的時候還要獲取一些數據。比如文章列表,我點擊了某個文章列表的容器,我想獲取這個器的對應的文章,那麼就需要把這個文章的id綁定到view.上面,以後我在點擊的時候,這個數據再通過event參數傳遞給後臺的js函數。綁定數據的時候,我們需要通過data-數據名的方式綁定。示例代碼如下:

<!--my.wxml-->
<view bindtap="tapfun" wx:for="{{wenzhang}}" data-id="{{item.id}}">
{{item.id}}.{{item.title}}
</view>

//my.js
data: {
    wenzhang:[{
      id:1,
      title:"天氣好"
    },
    {
      id:2,
      title:"我喜歡雪"
    }
    ]
  },

  tapfun:function(event){
    console.log(event)
  },

效果：

點擊第一個，控制檯輸出如下：

注意dataset裏面id爲1，當點擊第二個時，同理，上面的字段爲2。這樣就實現了獲取元素上的數據

事件冒泡和事件捕獲

什麼是事件冒泡？

絕大部分小程序定義好的事件都是冒泡的。冒泡是什麼意思呢,就是點擊一個子元素,如果事件是冒泡的,那麼這個事件也會傳遞給父元素。下面詳細說明：

<!--my.wxml-->
<view class="fu" bindtap="fu">
  <view class="son" bindtap="son"></view>
</view>

/**my.wxss**/
.fu{
  width: 200px;
  height: 200px;
  background: red;
}

.son{
  width: 100px;
  height: 100px;
  background: green;
}

//my.js部分
fu:function(){
    console.log("我是父元素")
  },
  son: function () {
    console.log("我是子元素")
  },

 效果：

 點擊綠色子view後，控制檯輸出：

這種情況就是事件冒泡 

出現事件冒泡的情況

下面兩種情況會出現冒泡：

1. 兩種元素存在嵌套
2. 兩個元素存在相同事件

事件冒泡解決

將bindtap改成catchtap即可

<!--my.wxml-->
<view class="fu" catchtap="fu">
  <view class="son" catchtap="son"></view>
</view>

其實最外面用catchtap意義不大，因爲事件冒泡是從子元素傳遞給父元素的。

target和currentTarget區別

不涉及到冒泡情況下，沒區別

在涉及到冒泡下，target指向發起者，即由誰發起的；currentTarget只想的是衍生的對象。

還是上面事件冒泡的例子，修改一下wxml和js

<!--my.wxml-->
<view class="fu" bindtap="fu" id="fu">
  <view class="son" bindtap="son" id="son"></view>
</view>

//my.js 
fu:function(event){
    console.log(event)
  },
  son: function (event) {
    console.log(event)
  },

點擊子view

 

可以看出：currentTarget和target指向了不同的東西

一些補充

在js函數中想要更新data裏面的數據，方法有些特殊。

//my.js
addone:function()
  {
    this.setData({
      num:this.data.num+1
    })//this指的是當前對象,即大對象page
  },

this代表當前對象，即js裏面的page大對象。注意：設置數值要用setData()函數。直接this.data.num++