微信小程序的事件绑定

清疚 2021-11-22 22:58 330阅读 0赞

**事件类别**：

tap：点击事件；

longtap：长按事件；

touchstart：触摸开始；

touchend：触摸结束；

touchcansce：取消触摸；

**事件绑定**：

bind绑定；

catch绑定；（能阻止事件冒泡）

**在冒泡的事件中： currentTarget 和 target是不一致的； currentTarget是我们绑定了的组件，target是发生事件的组件；**

例如：绑定点击事件 bindtap

page.wxml 文件

page.js 文件

//获取应用实例
    const app = getApp()
    Page({
      data: {
        text: "你好",
        onOff: false
      },
      btnclick:function(){
          console.log('123');
          var onOff = this.data.onOff;
          this.setData({text:"hello",onOff:!onOff});
      }
    })

**事件详解**：（类型 type ; 时间戳 timeStamp；事件源组件 target ； 当前事件 currentTarget ； 触摸点数 touches）

例如：打印一个点击事件

![aHR0cHM6Ly9pbWFnZXMyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTExOTYwNS8yMDE4MDMvMTExOTYwNS0yMDE4MDMwMTE1MTE0Nzg1NS0xNjg1ODk5MjUyLnBuZw][]

显示：

![aHR0cHM6Ly9pbWFnZXMyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTExOTYwNS8yMDE4MDMvMTExOTYwNS0yMDE4MDMwMTE1MTIwNjgwMi0yNzUxNDA0NzAucG5n][]

currentTarget：是我们点击的这个 view；

target：是我们目标的这个 view；

可以给这个 view 加一个 id：

![aHR0cHM6Ly9pbWFnZXMyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTExOTYwNS8yMDE4MDMvMTExOTYwNS0yMDE4MDMwMTE1MTQwNDIyMS0yMjEwNjg4MzAucG5n][]

效果：

![aHR0cHM6Ly9pbWFnZXMyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTExOTYwNS8yMDE4MDMvMTExOTYwNS0yMDE4MDMwMTE1MTQyMjMyOS0yMTQ1NjU4NDQyLnBuZw][]

在冒泡的事件中： currentTarget 和 target是不一致的； currentTarget是我们绑定了的组件，target是发生事件的组件；

currentTarget里面的 dataset是没有数据的。这个是为了方便我们添加我们自定义的属性：

![aHR0cHM6Ly9pbWFnZXMyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTExOTYwNS8yMDE4MDMvMTExOTYwNS0yMDE4MDMwMTE1MTUyOTc4NS0xNTA0NDgwMzI0LnBuZw][]

可以看到：

![aHR0cHM6Ly9pbWFnZXMyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTExOTYwNS8yMDE4MDMvMTExOTYwNS0yMDE4MDMwMTE1MTU1MDAyMi02NTEzNDA2MDQucG5n][]

通过点击事件，可以获取到这个空间的属性，从而可以方便我们的逻辑。

**这个会很实用**；

调用项目下的其他事件及调用app.js里面的事件：

//index.js
    //获取应用实例
    const app = getApp()
    Page({
      data: {
        text: '按钮',
      },
      btnclick:function(){
        var that = this;
        console.log('不错');
        that.btnchange(); //调用项目的其他事件
        app.clickBtn(); //调用app.js里面的事件
      },
      btnchange:function(){
        console.log('yes');
      }
    })

[aHR0cHM6Ly9pbWFnZXMyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTExOTYwNS8yMDE4MDMvMTExOTYwNS0yMDE4MDMwMTE1MTE0Nzg1NS0xNjg1ODk5MjUyLnBuZw]: /images/20211122/837f02f08dee41c8b06fc23c0c8974d3.png
[aHR0cHM6Ly9pbWFnZXMyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTExOTYwNS8yMDE4MDMvMTExOTYwNS0yMDE4MDMwMTE1MTIwNjgwMi0yNzUxNDA0NzAucG5n]: /images/20211122/0bfeab9a543e40edb5a3ee8519891422.png
[aHR0cHM6Ly9pbWFnZXMyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTExOTYwNS8yMDE4MDMvMTExOTYwNS0yMDE4MDMwMTE1MTQwNDIyMS0yMjEwNjg4MzAucG5n]: /images/20211122/fbd47e6d67e44f15ae35d7a9679146a5.png
[aHR0cHM6Ly9pbWFnZXMyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTExOTYwNS8yMDE4MDMvMTExOTYwNS0yMDE4MDMwMTE1MTQyMjMyOS0yMTQ1NjU4NDQyLnBuZw]: /images/20211122/4c2449b68ea843dfa822d5f65b7def5f.png
[aHR0cHM6Ly9pbWFnZXMyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTExOTYwNS8yMDE4MDMvMTExOTYwNS0yMDE4MDMwMTE1MTUyOTc4NS0xNTA0NDgwMzI0LnBuZw]: /images/20211122/fe54992f57724978a6cf62f734da37b0.png
[aHR0cHM6Ly9pbWFnZXMyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTExOTYwNS8yMDE4MDMvMTExOTYwNS0yMDE4MDMwMTE1MTU1MDAyMi02NTEzNDA2MDQucG5n]: /images/20211122/e888e36adc704092bc151c6cd3fa806e.png