按钮事件--嵌套事件（冒泡）--带参数事件--双向数据绑定

?

1 2	<!--按钮事件-->   <button bindtap="buttonTapHandle">点击事件</button>

 buttonTapHandle: function (e) {
    console.log("我点击了")
    //console.dir(e)将一个对象以树状形式打印到控制台
    console.dir(e)
  },

?

1 2 3 4 5 6 7

<!--冒泡事件，嵌套事件，防止两个一块执行-->   <view bindtap="outerHandle" style="width:200px; height:200px; background-color:red">   <!--<view bindtap="innerHandle" style="width:100px; height:100px; background-color:blue">     </view>-->     <view catchtap="innerHandle" style="width:100px; height:100px; background-color:blue">     </view>   </view>

outerHandle: function(){
    console.log("外部的事件")
  },
  //防止冒泡，将bindtap给为catchtap
  innerHandle: function(){
    console.log("内部的事件")
  },

?

1 2	<!--事件传参-->  <button bindtap="tap2Handle" data-name="张三">点击事件</button>

 tap2Handle: function (e){
    console.dir(e.target.dataset.name)
    //console.log(this)//事件处理函数中的this指定的还是页面对象
  },

?

1 2 3 4 5

<!-- 双向数据绑定 -->   <view>     <input value="{{ message2 }}" bindinput="inputHandle" style="border:2px solid #C0C0C0;" />     <text>{{ message2 }}</text>   </view>

inputHandle: function (e){
    // this.data.message2 = e.detail.value//直接赋值，不能实时改变
    //调用setData方法,实时监听改变
    this.setData({
      message2 : e.detail.value
    })

index.js

//index.js
//获取应用实例
const app = getApp()
//将多有的数据和事件写到page方法中
Page({
  //为页面提供数据的
  //data就是界面和逻辑之间的桥梁
  data:{
    message:"Hello world",
    perssion:{
      name: "zhangsan",
      age: 12
    },
    viewClassname:"hello",
    todos:[
      { name: 'javascript', completed:false },
      { name: 'html', completed: true },
      { name: 'css', completed: false }
    ],
    message2:"",
  },
  buttonTapHandle: function (e) {
    console.log("我点击了")
    //console.dir(e)将一个对象以树状形式打印到控制台
    console.dir(e)
  },
  outerHandle: function(){
    console.log("外部的事件")
  },
  //防止冒泡，将bindtap给为catchtap
  innerHandle: function(){
    console.log("内部的事件")
  },
  tap2Handle: function (e){
    console.dir(e.target.dataset.name)
    //console.log(this)//事件处理函数中的this指定的还是页面对象
  },
  inputHandle: function (e){
    // this.data.message2 = e.detail.value//直接赋值，不能实时改变
    //调用setData方法,实时监听改变
    this.setData({
      message2 : e.detail.value
    })
  }
})

index.wxml

<!--index.wxml-->
<!-- 基于xml语言，用来定义页面结构单标签也也结束例如image-->
<view class="container">
  <text>{{message}}</text>
  <text>{{perssion.name}}</text>
  <text>{{perssion.age}}</text>
  <view class=" style1 {{viewClassname}}"></view>
  <!-- mestach语法可以用在以上，不能用于定义标签名和属性名-->
  <!--可以直接使用字面量和简单的逻辑运算符-->
  
  <!--列表渲染-->
  <!--起别名wx:for-item="别名"-->
  <view>
    <view wx:for="{{ todos }}" wx:key="key">
      <text>{{ index }}</text>
      <checkbox checked="{{ item.completed }}"></checkbox>
      <text>{{ item.name }}</text>
    </view> 
  </view>

  <!--按钮事件-->
  <button bindtap="buttonTapHandle">点击事件</button>

  <!--冒泡事件，嵌套事件，防止两个一块执行-->
  <view bindtap="outerHandle" style="width:200px; height:200px; background-color:red">
  <!--<view bindtap="innerHandle" style="width:100px; height:100px; background-color:blue">
    </view>-->
    <view catchtap="innerHandle" style="width:100px; height:100px; background-color:blue">
    </view>
  </view>

   <!--事件传参-->
  <button bindtap="tap2Handle" data-name="张三">点击事件</button>

  <!-- 双向数据绑定 -->
  <view>
    <input value="{{ message2 }}" bindinput="inputHandle" style="border:2px solid #C0C0C0;" />
    <text>{{ message2 }}</text>
  </view>  
</view>