大家好，我是小毅，本节我们来学习一下事件响应和视图层数据获取。

那么首先我们来了解一下什么是事件。严格来说，事件并不是js中的概念，而是在视图层，是视图层到逻辑层的一种沟通方式，它可以把用户的行为反馈到逻辑层进行处理。也就是说，事件是在wxml中，通过绑定到组件上，当有触发事件发生时，就会执行逻辑层中对应的事件处理函数。对应的处理函数就是事件响应，写在页面的js文件中。通过绑定，可以从wxml页面向js传递很多信息，比如id等。

在所有事件中，最常用的就是事件，下面我们以此为例讲解如何在wxml中绑定事件，以及在js中定义事件响应。

当我们要在小程序中创建新的事件响应时，第一步就是要将其绑定到组件上，对于事件，我们只需要在wxml组件中添加一个属性，并将属性值设置为事件处理函数的函数名即可。

第二步，我们需要在对应页面的js中定义事件处理函数，事件处理函数也是一种函数，之前我们已经了解过函数，这里就不多说函数的区别了，需要注意的是函数名要和wxml中绑定的属性值一致，这样逻辑层和视图层才能对应。对于事件，当用户点击wxml组件时，会到该页面对应的Page中找到对应的事件处理函数并执行。

这里是一个视图组件的点击响应，wxml中的代码如上图，可以看到这里的事件响应函数有名字，在js代码中我们定义了这个函数，如右图所示。.log语句将函数获取到的参数打印在编译器的输出中，括号中的变量就是需要打印出来的变量，最后我们在输出中就可以看到这个变量的值了。这个是比较常用的调试方法，至于获取到的具体内容，请大家自己尝试一下，看看wxml组件中有没有id属性，data属性之类的信息。

这是最常用的点击事件的写法，如果要保证能触发响应，能执行函数，还要注意这里的view能够显示在界面上。如果设置了view组件，那么view组件本身是不可见的，自然就无法点击，也就无法触发事件响应。同样的，如果view组件的样式设置有问题，比如被其他组件遮挡或者view占据的屏幕位置太小，也会造成点击困难。所以js、wxml、wxss其实是紧密配合的。

另外大家可以发现我们这里实现的功能，其实view可以当做一个按钮来使用。通过这种方式，我们确实可以模拟出实际的效果，因为它是一个比较流行的属性，大部分组件都可以使用它，比如图片，点击图片就可以产生事件响应。所以在小程序开发中，可以有很多不同的方式来实现同样的效果。那么它和view有什么区别呢？既然有view，为什么还要定义它呢？请大家课后自行探索。

到这里我们就讲完了最常见的点击响应，其实还有很多事件响应，比如对于输入框组件来说，就会有焦点事件和失焦事件。用户点击输入框之后，光标开始闪动，此时系统输入定位点就在输入框中，我们就可以输入了。这个过程就叫做焦点，反之就是失焦。所以我们可以利用这两个事件，比如每次失焦之后，我们就可以获取输入的内容，而获取的代码就要写在失焦事件的响应函数中。关于事件的更多内容，大家可以访问微信开发者文档进行学习，就是右上角的链接。

js部分还有一个比较重要的内容就是view层数据的获取，我们可以通过数据绑定来实现数据流从js到wxml的映射过程，接下来我们就看看wxml到js的映射是怎么完成的，这样我们的数据流才能形成一个闭环。

然后通过事件响应就可以在逻辑层（js）中获取视图层（wxml）中的数据了，获取的数据分为两类，一类是id数据，一类是date-data，获取数据的方式都差不多，对任意组件使用id属性和data-，绑定事件响应即可（如）。

例如id数据的获取如下，在页面对应的js文件中，编写事件响应函数，那么我们就可以通过函数传入参数中的对象中的id字段来获取到组件绑定的id了。具体的，在wxml文件中写上面的代码，在页面的js文件中写下面的代码。

另外我们还可以在页面对应的js文件中编写事件响应函数来获取组件绑定的数据值，wxml组件绑定方式是data-变量名，比如data-x，获取到的变量名就是x，一个组件可以设置多个data-xxx，变量名在连字符后面，每个数据条x都是一个独立的属性，所以我们可以绑定很多个变量，获取到绑定的变量名即可。

总体来说两种方式都可以获取视图层数据，区别在于id数据对于wxml中的一个组件来说应该是唯一的，同一个组件只能设置一个id数据，data类型的数据相对来说更灵活，可以设置多种方式，具体使用需要根据场景来选择。

好了，本期就到这里，明天我们继续，如果还有什么疑问，欢迎在文章末尾留言。

想看视频版本吗？

关注公众号“微程序学院”，我们的视频教程即将上线

如果你写了一篇好文章并想提交

请联系我们