記事ディレクトリ
1イベント
イベントは、レンダリングレイヤーからロジックレイヤーへの通信方法です。イベントを通じて、レンダリングレイヤーでユーザーが生成した動作を、ビジネス処理のためにロジックレイヤーにフィードバックできます。
1.1ミニプログラムで一般的に使用されるイベント
1.2イベントオブジェクトの属性リスト
イベントコールバックがトリガーされると、イベントオブジェクトイベントが受信され、その詳細なプロパティを次の表に示します。
1.2.1ターゲットとcurrentTargetの違い
targetはイベントをトリガーしたソースコンポーネントであり、currentTargetは現在のイベントがバインドされているコンポーネントです。
内側のボタンがクリックされると、クリックイベントがバブリングして広がり、外側のビューのタップイベントハンドラーもトリガーされます。（イベントバブリング）この時点で、外観は次のようになります。
e.targetは、イベントをトリガーするソースコンポーネントを指します。したがって、e.targetは内部ボタンコンポーネント
です。e.currentTargetは、現在イベントをトリガーしているコンポーネントを指します。したがって、e.currentTargetは、現在のビューコンポーネントです。
1.3bindtapの構文
アプレットでは、HTMLにonclickマウスクリックイベントはありませんが、tapイベントはユーザーのタッチ動作に応答するために使用されます。
bindtapを使用すると、タップタッチイベントをコンポーネントにバインドできます。構文は次のとおりです。
<!--pages/list/list.wxml-->
<button type="primary" bindtap="btntap">按钮</button>
ページの.jsファイルで対応するイベント処理関数を定義すると、イベントパラメーターは正式なパラメーターイベント（通常はeと省略されます）を介して受信されます。
// pages/list/list.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 页面对应的时间处理函数
*/
btntap(e) {
console.log(e)
}
})
1.4イベントハンドラーのデータ内のデータに値を割り当てます
this.setData（dataObject）メソッドを呼び出すことにより、ページデータ内のデータを再割り当てできます。
<!--pages/list/list.wxml-->
<view>{
{count}}</view>
<button type="primary" bindtap="btntap">改变count</button>
// pages/list/list.js
Page({
/**
* 页面的初始数据
*/
data: {
count: 0
},
/**
* 页面对应的时间处理函数
*/
btntap(e) {
// 更改data中的数据
this.setData( {
// 要修改的数据项
// 获取页面的数据 this.data
count: this.data.count + 1
} )
}
})
ワンボタンクリック
1.5イベントパラメータの転送
アプレットで渡されるイベントパラメータは特別であり、イベントをバインドするときにイベントハンドラ関数のパラメータを渡すことはできません。
つまり<button type="primary" bindtap="btntap(123)">改变count</button>、コードは有効になりません。
アプレットはbindtapの属性値をイベント名として扱うため、これはbtntap（123）という名前のイベント処理関数を呼び出すのと同じです。
データを提供できます-*コンポーネントのカスタム属性パラメーター。*はパラメーターの名前を表します。
<!--pages/list/list.wxml-->
<view>{
{count}}</view>
<button type="primary" bindtap="btntap" data-info="{
{21}}">改变count</button>
infoは、パラメーター
値の名前として解析されます2は、パラメーターの値として解析されます
イベント処理関数では、特定のパラメーターの値は、event.target.dataset。パラメーター名を介して取得できます。
// pages/list/list.js
Page({
/**
* 页面的初始数据
*/
data: {
count: 0
},
/**
* 页面对应的时间处理函数
*/
btntap(e) {
console.log(e.target.dataset.info)
}
})
1.6bindinputの構文形式
アプレットでは、テキストボックスの入力イベントは入力イベントによって応答されます。
bindinputを使用すると、入力イベントをテキストボックスにバインドできます。
<!--pages/list/list.wxml-->
<view>{
{count}}</view>
<button type="primary" bindtap="btntap" data-info="{
{21}}">改变count</button>
<input type="text" bindinput="iptinput"/>
/* pages/list/list.wxss */
input {
border: 1px solid black;
margin: 10px;
}
ページの.jsファイルでイベントハンドラーを定義します。
テキストボックスの入力値を取得するには、e.detail.valueを使用します
// pages/list/list.js
Page({
/**
* 页面的初始数据
*/
data: {
count: 0
},
/**
* 页面对应的时间处理函数
*/
btntap(e) {
console.log(e.target.dataset.info)
},
iptinput(e) {
// 获取输入框的值
const value = e.detail.value
// 打印输入框的输入值
console.log(value)
//将输入框的值赋值给页面的数据变量，用于页面数据的渲染
this.setData({
count: value
})
}
})
