开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第2天，点击查看活动详情

昨晚学习了微信小程序当中的WXS文件里涉及的知识，早上起来赶紧做个总结，要不然的话会忘记的！！！

js里的事件对象

js的事件函数里只有一个参数event

1. type事件类型

• 类型：string

2. timeStamp 打开页面到事件发生的时间戳
3. target 触发事件的源组件

• 类型：Object
• 属性：id 触发事件组件的id值
• 属性：dataset 触发事件组件的自定义data-xxx属性

4. currentTarget 事件绑定的组件

• 类型：Object
• 属性：id 事件绑定组件的id值
• 属性：dataset 事件绑定组件的自定义data-xxx属性

5. mark 事件标记数据（这个我也不清楚是收集的什么，有路过的小伙伴帮忙留个言，告诉我一下）

WXS文件响应事件函数

从基础库版本2.4.4开始，支持使用 WXS 函数绑定事件，WXS函数接受2个参数，第一个是event，在原有的 event 的基础上加了event.instance对象，第二个参数是ownerInstance，和event.instance一样是一个ComponentDescriptor对象。 WXS文件中大多时候都是修改组件的样式，可以修改内联样式，还有class样式。修改样式，我们就要先找到要修改的组件。

1、ownerInstance.selectComponent（）获取当前触发事件的组件实例

在wxs中，通过ownerInstance.selectComponent（）方法可以获取当前触发事件的组件，从而更改它的样式，省去了往js中传事件函数进行处理

var wxsFunction = function(event, ownerInstance) {
    var instance = ownerInstance.selectComponent('.classSelector') // 返回组件的实例
    instance.setStyle({
        "font-size": "14px" // 支持rpx
    })
    instance.getDataset()
    instance.setClass(className)
    // ...
    return false // 不往上冒泡，相当于调用了同时调用了 stopPropagation 和preventDefault
}

因为在WXS文件中写代码要比js文件中要运行速度快2-20倍，所以有时候可以把能在WXS文件中运行的放到wxs文件中，下面这个方法就是可以在WXS文件中调用JS文件中的事件函数。

2、ownerInstance.callMethod（'js中的事件函数名'，arg）

该方法可以在wxs文件中，调用js文件中的事件处理函数。第一个参数就是js文件中的事件函数名，第二个参数arg是函数中的参数

//index.wxml文件
<!-- WXS响应事件 -->

<wxs module="tools" src="./tools.wxs"></wxs>
<view class="momoP" style="background-color: {{isColor?'#fcc':'#ccf'}};">
  //给"茉莉花"绑定事件，并且把id也给了茉莉花
  <view id="momo" bindtap="{{tools.changeMoMo}}">茉莉花</view>
</view>

//index.js
Page({
data:{
    isColor:false
}
})

changeColor:function(){
this.setData({isColor:!this.data.isColor})
}
  
//tools.wxswj
function changeMoMo(event,ownerInstance){
  var mo=ownerInstance.selectComponent('#momo');
  mo.setStyle({
    "font-size": "34px"
  })
  ownerInstance.callMethod("changeColor"，arg)
  console.log(event)
};

WXS属于渲染层，让事件在渲染层触发，省去了渲染层与逻辑层的来回通讯，提高性能。

WXS自定义事件

<wxs module="test" src="./test.wxs"></wxs>
只要propValue的值发生变化，就会触发wxs文件中的propObserver事件
<view 
    change:prop="{{test.propObserver}}"
    prop="{{propValue}}"
    bindtouchmove="{{test.touchmove}}" 
    class="movable">
</view>

注意：上面的写法，第一次渲染的时候test.propObserver事件就会触发一次。这个函数接收到四个参数：

• newValue：触发js文件中事件this.setData()之后新的值
• oldValue：触发js文件中事件this.setData()之前旧的值
• ownerInstance：整个页面的对象，通过该对象的selectComponent（选择器）方法获取触发事件的对象实例
• instance：当前触发事件的组件实例，相当于this使用

var wxsFunction = function(event, ownerInstance) {
    var instance = ownerInstance.selectComponent('.classSelector') // 返回组件的实例
    instance.setStyle({
        "font-size": "14px" // 支持rpx
    })
    instance.getDataset()
    instance.setClass(className)
    // ...
    return false // 不往上冒泡，相当于调用了同时调用了 stopPropagation 和preventDefault
}

其中入参 event 是小程序事件对象基础上多了 event.instance 来表示触发事件的组件的 ComponentDescriptor 实例。ownerInstance 表示的是触发事件的组件所在的组件的 ComponentDescriptor 实例，如果触发事件的组件是在页面内的，ownerInstance 表示的是页面实例。

一定要记得，如果触发WXS中的函数，需要加上'{{}}'，否则不生效。 以上就是昨晚学的知识，学的不是很透彻，就是一些皮毛，大家可以在写代码时进行参考。希望能对小伙伴有帮助，路过的小伙伴可以帮我解决一下上面的疑问哦！！！