First, the basic events
<!-- 基本的事件使用 通过给组件添加一个 "bind+事件名" 的属性，属性的值指向一个定义在当前页面对象中JS方法" -->
<button bindtap="buttonTapHandler">点击按钮</button>
Write down the corresponding event in the corresponding response effect jd file:
1. event bubbling
<!-- 事件冒泡 -->
<view bindtap="outerHandler" style="width:200px; height:200px; background-color:red">
<view catchtap="innerHandler" style="width:100px; height:100px; background- color:blue"></view>
<!-- catch+事件名 是绑定事件并阻止冒泡 -->
</view>
Click on the blue view implementation of the results:
Second, the mass participation event ( DATA- )
<button bindtap="buttonTapHandler2" data-name="张三">传参按钮</button>
<!--
1.事件的基本使用 bind[xxx] catch[xxx]
2.小程序中事件冒泡和HTML中处理不一样 这里使用catch[xxx]
3.如果需要给事件处理函数传递参数只能通过dataset方式
-->
Third, the way data flow and how binding events
<view>
<input class="dataBindInput" value="{{dataBind}}" bindinput="bindDataHandler"></input>
<text>{{dataBind}}</text>
</view>
1. abstract common event handler
Case: binding manner using input form submission
<view class="container">
<view class="inputs">
<input class="username" placeholder="请输入账号" value="{{username}}" bindinput="inputChangeHandler" data-prop="username"/>
<input class="password" type="password" placeholder="请输入密码" value="{{password}}" data-prop="password" bindinput="inputChangeHandler"></input>
</view>
<view class="buttons">
<button type="primary" bindtap="loginHandler">登录</button>
</view>
</view>
js control:
Log in using the form form manner form submission
Js get the value in the process:
Page({
data: {
username: "",
password: ""
},
//用于处理表单提交事件
loginHandler: function (e) {
//1.先需要知道用户的输入值
console.log(e.detail)
//2.根据用户输入的值判断
//3.根据判断的结果做出响应
}
})
Display of results:
