小程序事件系統 —— 33 事件傳參

小程序事件系統 —— 33 事件傳參 - data-*自定義數據

事件傳參：在觸發事件時，將一些數據作為參數傳遞給事件處理函數的過程，就是事件傳參；

在微信小程序中，我們經常會在組件上添加一些自定義數據，然后在事件處理函數中獲取這些自定義數據，從而完成業務邏輯的開發，這個過程稱為小程序的事件傳參；

在組件上通過 data-* 定義需要傳遞的數據，其中 * 是自定義的屬性，例如：<view data-id="100" bindtap="handler" />，代碼中的 id 就是自定義的屬性，屬性值 100 是需要傳遞的數據，然后通過事件對象獲取自定義的數據；

下面打開微信開發者工具演示一下事件傳參的使用步驟，在演示完后講解一下相關的注意事項：

在 pges/cate/cate.wxml 文件中添加下面代碼：
```
<view><button bind:tap="btnHandler" data-id="1" data-name="tom">按鈕</button>
</view>
```
綁定事件 btnHandler，自定義 id 和 name 數據；
在 pages/cate/cate.js 文件中定義 btnHandle 事件處理函數：
```
  btnHandler(event){console.log(event)}
```

在 pages/cate/cate.scss 文件中定義一下 view 的樣式：

view {display: flex;height: 300rpx;background-color: skyblue;align-items: center;
}

在頁面中點擊按鈕，在 console 中可以看到打印的事件對象信息，如下：

在這里插入圖片描述
打開事件對象，可以看到在 currentTarget 和 target 中都能看到傳遞的數據信息，如下：

在這里插入圖片描述
這時候我們需要了解一下 currentTarget 和 target 的區別是什么：

在這個例子中，currentTarget 的事件綁定者是 btn 按鈕，target 的事件觸發者也是 btn 按鈕；

接下來看一下 currentTarget 和 target 不是指向同一個組件的情況：

<view bind:tap="parentHandler" data-parentid="1" data-parentname="tom"><button data-id="1" data-name="tom">按鈕</button>
</view>

 parentHandler (event) {console.log(event)}

刷新重新運行，清空 console 區域，點擊按鈕周圍的藍色區域（注意不要點擊按鈕），觀察 console 打印的事件對象信息，如下：

在這里插入圖片描述
可以看到，在打印的事件對象中，currentTarget 獲得的數據是 parentid 和 parentname，可以知道當前的事件綁定者是 view，如下：

在這里插入圖片描述
同樣，target 獲取的數據也是 parentid 和 parentname，可以知道當前事件的觸發者也是 view，如下：

在這里插入圖片描述
下面點擊按鈕（注意不要點擊按鈕外的藍色區域），觀察 console 打印的事件數據，可以發現，currentTarget 綁定的數據是 view 對應的自定義數據，如下：

在這里插入圖片描述
再看一下 target 的數據，可以看到 target 中綁定的數據是 button 中對應的自定義數據，因為這里是點擊按鈕觸發的事件，所以 target 的數據為 button 中定義的數據，如下：

在這里插入圖片描述
接下來講解一下兩個注意事項：

簡單對上面的內容進行總結：

參考視頻：尚硅谷微信小程序開發教程

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/bicheng/72803.shtml
繁體地址，請注明出處：http://hk.pswp.cn/bicheng/72803.shtml
英文地址，請注明出處：http://en.pswp.cn/bicheng/72803.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！