微信小程序 笔记4事件

目录

事件绑定

获取元素上的数据

事件冒泡和事件捕获

什么是事件冒泡？

出现事件冒泡的情况

事件冒泡解决

target和currentTarget区别

一些补充

---

事件绑定

下面这两种意义相同

<!--my.wxml-->]
<view bindtap="tapfun">请点击</view>
<view bind:tap="tapfun">请点击</view>

//my.js部分
tapfun:function(){
    console.log("执行tapfun()")
  },

获取元素上的数据

我们能捕获到点击事件还不够,我们在点击的时候还要获取一些数据。比如文章列表,我点击了某个文章列表的容器,我想获取这个器的对应的文章,那么就需要把这个文章的id绑定到view.上面,以后我在点击的时候,这个数据再通过event参数传递给后台的js函数。绑定数据的时候,我们需要通过data-数据名的方式绑定。示例代码如下:

<!--my.wxml-->
<view bindtap="tapfun" wx:for="{{wenzhang}}" data-id="{{item.id}}">
{{item.id}}.{{item.title}}
</view>

//my.js
data: {
    wenzhang:[{
      id:1,
      title:"天气好"
    },
    {
      id:2,
      title:"我喜欢雪"
    }
    ]
  },

  tapfun:function(event){
    console.log(event)
  },

效果：

点击第一个，控制台输出如下：

注意dataset里面id为1，当点击第二个时，同理，上面的字段为2。这样就实现了获取元素上的数据

事件冒泡和事件捕获

什么是事件冒泡？

绝大部分小程序定义好的事件都是冒泡的。冒泡是什么意思呢,就是点击一个子元素,如果事件是冒泡的,那么这个事件也会传递给父元素。下面详细说明：

<!--my.wxml-->
<view class="fu" bindtap="fu">
  <view class="son" bindtap="son"></view>
</view>

/**my.wxss**/
.fu{
  width: 200px;
  height: 200px;
  background: red;
}

.son{
  width: 100px;
  height: 100px;
  background: green;
}

//my.js部分
fu:function(){
    console.log("我是父元素")
  },
  son: function () {
    console.log("我是子元素")
  },

 效果：

 点击绿色子view后，控制台输出：

这种情况就是事件冒泡 

出现事件冒泡的情况

下面两种情况会出现冒泡：

1. 两种元素存在嵌套
2. 两个元素存在相同事件

事件冒泡解决

将bindtap改成catchtap即可

<!--my.wxml-->
<view class="fu" catchtap="fu">
  <view class="son" catchtap="son"></view>
</view>

其实最外面用catchtap意义不大，因为事件冒泡是从子元素传递给父元素的。

target和currentTarget区别

不涉及到冒泡情况下，没区别

在涉及到冒泡下，target指向发起者，即由谁发起的；currentTarget只想的是衍生的对象。

还是上面事件冒泡的例子，修改一下wxml和js

<!--my.wxml-->
<view class="fu" bindtap="fu" id="fu">
  <view class="son" bindtap="son" id="son"></view>
</view>

//my.js 
fu:function(event){
    console.log(event)
  },
  son: function (event) {
    console.log(event)
  },

点击子view

 

可以看出：currentTarget和target指向了不同的东西

一些补充

在js函数中想要更新data里面的数据，方法有些特殊。

//my.js
addone:function()
  {
    this.setData({
      num:this.data.num+1
    })//this指的是当前对象,即大对象page
  },

this代表当前对象，即js里面的page大对象。注意：设置数值要用setData()函数。直接this.data.num++