32-尚硅谷-小程序-收集表单项数据，event对象传参

好的，我们继续啊，那登录界面呢，我们把这个静态页面啊，快速的搭建了一下，那这节课呢，我们去做这个完整的登录功能啊，那么要做登录功能呢，我们需要来到GS里边啊，首先呢，大家要知道啊，我们去做一个登录的话呢，呃，作为一个前端开发程序员，我们必须要了解啊，一个完整的登录流程。它分为哪几步？对吧，那首先呢，我给大家写到上面去啊，写到上面来，我们放到这儿，呃，一个登录流程。OK啊，那就是这个，那么登录流程里面呢，它分为这么几步啊，第一步呢，叫收集我们表单项数据啊，表单项啊，来收集表单项数据啊，第二步呢，我们需要做的呢，是啊前端验证。嗯，然后呢，第三步呢，我们要做的是后端验证啊，收集表达一下数据，这个不难啊不难，那我们重点说一下所谓的前端验证和后端验证都验证什么。

来，那么前端验证的话呢，我们需要验证啊，我们的这个啊，你比如用户信息，嗯，是否合法，那么这个是否合法呢？通常针对的就是你比如说假如说啊，我们是手机号登录，那最起码你的账号啊，是不是真的手机号啊，够不够11位对吧，是不是以幺开头的等等，那验证啊用户的信息啊。那这个信息呢，包含什么，我给大家在这儿写一下啊，那就是账号啊密码啊，是否合法，那前端验证不通过啊，如果是前端验证不通过。我们要干嘛啊，前端验证不通过的话，那啊就提示用户，然后呢啊不需要发请求啊，给什么给后端好，那这是这个啊，如果说前端验证通过了。

嗯，啊，前端验证通过了，我们要干嘛，然后呢，我们要发请求，那这个发请求呢，通常呢，我们需要干嘛啊，携带我们的用户的呃，账号啊密码。嗯。啊，携带我们的账号密码，然后呢，给我们的服务器端，那接下来就是进行啊我们的后端验证，那么后端验证的话呢，它需要验证什么啊，首先呢，要验证我们的用户啊是否存在。那就是去数据库里面去查一下啊，你带过来的账号有没有啊用户存在。和不存在它有两种对吧，用户不存在，那么直接返回，哎，嗯，那就是告诉前端对吧，嗯，用户不存在，然后呢，那用户存在呢。那第三个啊，嗯，那用户存在的情况下呢，我们还需要验证什么。

啊，我们要验证这个密码是否正确，那这个呢，就是拿着啊我们。前端发送过来的密码呢，去跟跟我们数据库里面的密码呢，啊去对比啊，如果说密码不正确，它是不是也有两种呀，对吧？啊密码不正确那就是哎返回给前端啊提示对吧？密码不正确，嗯，那最后一种呢，那如果说密码正确，那同样呢，也是返回给前端数据啊啊提示啊用户登录成功。啊，那这一次的返回呢，通常呢，会携带着一些啊用户的信息相关信息，OK，那这个大概就是一个登录流程啊，那在知道了这个以后呢，那接下来呢，我们要去做这个登录，那第一步呢，我们就是要收集表单项的数据，那么我们对应的表单项呢，有两个对吧？啊有两个，一个是手机号码，一个是我们的密码。

那么在这里呢，我提一个要求啊，提一个要求，那就是说当用户输入表单上内容的时候呢，我让你实时的去收集，那这个效果呢，有点像我们V里面的VGA model的双向数据绑定的效果，那要做这个效果呢，实时收集呢，我们需要在我们的哎，Data中呢，我先初始化一个啊，因为手机号登录，所以呢，我初始完一个phone再来一个哎，Password，好的，那这两个呢，分别代表的，那这个呢，就是我们的手机号，然后下边那个呢啊，就是用户的密码。啊，初始化的呃，数据有了，那接下来我们要说我们如何去收集表单上的数据啊，那在这里啊，大家要注意啊，那表单项已经有了，我们要实时的去收集的话呢，那就是需要知道表单项的内容实时发生改变，所以呢，我们需要绑定一个世界，你就呃，By input世界呗。

啊，Input事件，呃，同类型的呢，还有一个change事件。啊，这个呢，在H5里边我们早就接触过了，那么它两个的区别是什么呢？一定要注意音input的事件呢，是表单上的内容实时发生改变会触发的，而change事件呢，是需要实时改变，以后呢，我们还需要失去焦点才能触发，所以啊，我们选择用input事件啊在这里呢，我们来一个啊handler input吧，嗯，处理input事件，那现在呢，我是在我们的手机号码的这个表单项呢去定义的，那同时我再在我们的密码表单项上也定义一个事件，注意啊，这个事件的回调，它俩我选择用同一个。

OK，嗯，来我们在这儿呢啊，去定一下啊，那这个呢是表单项。那表单项内容，然后呢，发生嗯，改变的回调，OK，我们写到这儿，那这个时候呢，啊，如何去拿表单项的数据呢，我们需要通过这个event对象啊，然后呢，我去给他输出一下这个event对象。好的，那现在我们来到我们的调试器，来到咱的控制台。那我这输个一来打印个event，然后呢，下面输一也打一个event，那怎么去拿到里边的数据呢？我先不展开啊，大家还是回顾一下，在咱们H5的项目里面，我们要拿这个表单项的数据怎么拿。那对应的是点什么呀。

Target对吧？啊event.target.value啊，这是我们要拿到的数据，而在我们小程序的项目里面，大家看一眼，我们需要拿到的数据呢？它在哪呢？在这个detail里面，哎，有个value，所以啊，我们在小程序中要拿到最终的数据呢，需要通过event点。什么呀，detail.value去获取，好，那为了大家看的清楚一点呢，我在这儿呢，先打印一下这个。就这个呗，来，那我们再看。来那上边呢，我随便输一个假设是手机号，那下边呢，假设我输个密码都有打印对不对。但是问题来了，我们现在呢，是能够实时的收集我们表达上的数据，但是那数据有了，我要把这个数据到底是要更新到phone的呢，还是要更新到password？

但目前来看，我们并不知道应该更新到水里边。而且我们也不能随便更新吧，那你上边的表单项的内容必须要更新到phone，下边表单项的内容必须要更新到password对不对。啊，那如何解决？这个问题。那这样就是我故意设置同一个世界处理函数的原因啊，再给大家讲一个知识点，OK，那这个时候呢，我们需要来到小程序的官网里面来到指南。然后呢，我们可以往下翻啊，找到小程序的框架，往下呢，以其中有一张叫世界系统，诶这个之前我们看到过，那么之前呢，我们只是看了哎如何去绑定世界对吧？那在这里呢，大家看啊这呢是通过by tap呢去绑定那个世界叫take name。那对应的在配件也是说GS中呢，我们定义一下这个回调，并且呢，是把世界的event对象呢做了一个输出。

然后呢，下面说的啊，可以看到log出来的信息大致如下，那么下面呢，给大家展示的就是对象。那么在这里除了绑定世界啊，大家看这还多了一个叫ID。为tap test是一个字符串，哎，声明那个ID属性以后呢，我们看一下啊，在下边这有一个target以及current target。那么在这两个里面呢，分别有一个ID属性，看到没有来它俩呢，代表是table test table test不就是个字符串吗？好了，那也就是说在我们绑定世界的同时，我们声明ID属性的话，哎，那么ID对应的value值呢，我们可以在对应的或者是target target中这个对象中获取。那这一把呢，就相当于是如何向世界对象的event对象去传参数。

但传进性的数据我们可以能能够拿到。好，那。呃，知道了，如何获取呢？在这里呢，可能有的小伙伴啊比较诧异啊，我们在H5的项目呢，咱们用的是target。对吧，点target，而在小程序的项目里面呢，又多了一个叫current target。对吧，那么current target呢，相比于target多了一个current，哎，那这个current呢，代表的是当前的意思。那么它俩到底有什么区别呢？来啊，这里呢，要搞清楚，这个呢，我给大家在咱们的课堂笔记里边啊，咱们再写一个。啊，来到我们小程序的课堂笔记。啊，稍等啊，我们打开一下这个对应的笔记。来，那现在呢，我们的笔记已经打开了啊，在扩展内容这儿呢，我给大家再列一个东西啊，首先啊，要搞清楚这个啊，那在这儿呢，我给大家这儿加一个标题吧。

啊，那这个呢是第一个啊好，那这呢我们就来第二个了。嗯，来第二个要搞清楚target和current target的区别呢，我们需要知道一个东西呢，叫世界委托。啊，这是大家之前接触过的一个支识点，对吧？呃，世界委托，那么事界委托的话，来往下翻一点啊，要搞清楚什么是世界委托呢？有这么几个问题，那第一个啊，什么是啊世界委托对吧？啊事件委托的好处是什么？然后呢，我们说世界委托的原理是什么啊，触世界委托中啊，触发世界的是谁啊是谁。然后呢，如何找到触发世界的对象，就这么几个问题，那么这几个问题如果说大家都能回答出来啊，那说明世界委托就没问题了，我们先说第一个啊，什么是世界委托？那就是将子元素的世界对吧？啊，我们说委托啊，其实这个所谓的委托呢，就是绑定啊，委托给谁呢？委托给负元素，说白了是绑定在负元素身上，这就是世界委托。

那么为什么要这样做呢？那我们就要说世界委托的好处了，嗯，那这里呢，我们琢磨一个事情啊，假设一个ul下边呢，有100个Li。那我的要求呢，是给这100个Li分别绑定一个点击事件。如果说什么都不考虑的话呢，我们可以拿到这100个Li的数组，然后循环便利分别去绑定，那这样的话呢，可以实现啊，但是啊，我们是不是需要循环便利100次呀。效率比较差。

啊，还有一个很重要的原因是，假设后期我又添加了100个阿拉，那么后添加的这100个阿拉有那个点击事件吗？哎，并没有，因为之前循环便利的时候呢，它里面只有100个。好，那这是这个，那没有用世界委托啊，就是刚才的问题，如果说用了世界委托，那我们只需要将给子元素绑定的点击事件呢，委托给负元素身上，也说在他的身上呢去绑定这个事件，那这样的话，第一个好处是我们只需要。绑定一次。就好了。啊，那这100个呢，都可以享用这个事件，那么第二个好处呢，就是如果说后添加的100个元素，它也能享用这个同类型的点击事件。啊，那这就是世界委托的好处啊，第一个啊是减少我们绑定的呃次数，第二个呢，是新添加的元素啊，后期啊，新添加的元素呢，也可以享用啊之前啊委托的世界，OK，那这是好处，那么世界委托的原理是什么啊，是我们之前说过一个东西叫冒泡。

啊，你想一下一定是冒泡，如果没有冒泡的话，那么。这个委托就不生效了，你想冒泡就是从子元素冒到负元素身上，才能触发我们负元素身上的事件，对不对？那接下来我们还要知道啊，触发事件的是谁呢？啊，我们现在呢，仅仅是将为事件呢委托在负元素之上了，但是最终触发事件的一定还是子元素，还是子元素，触发世界是子，然后冒泡冒到负元素身上，触发之前绑定的世界而已。OK，那既然是子元素啊，那你想想看，我们有很多的子元素。

对吧，那触发事件呢，很有可能是某一个子元素，那么如何去找到对应的子元素呢？对吧？啊，那就是通过我们之前学过的1.target。那那以上呢，是世界委托的相关知识点，在这里大家琢磨一个事情。我们用世界委托的时候，我绑定世界的元素是负元素。对吧？但是真正触发事件的是子元素，所以我们能够得出一个结论，那么点target指向的元素不一定是当初绑定世界的元素。是不是很有可能是它的负元素？那么典型的案例呢，就是世界委托。典型的案例就是世界委托。哎，再说一遍啊，Inventor target的特性是什么？我指向的元素有可能是绑定世界的元素，也有可能不是绑定世界的元素。

啊，而接下来我们要说这个啊，Current target。啊，他呢跟我们这个target的区别是什么？那这个current啊target它呢要求啊绑定世界的元素啊，一定是啊触发世界的元素，那这样的话呢，我们才能通过这个current target去找到这个元素，而刚才我们说的这个target呢，它呢啊绑定世界的元素啊，不一定是什么，不一定是触发世界的元素。好的，以上呢，就是它俩的区别。啊，那看到这儿呢，回头再看一下这儿啊，我们就很清晰了啊，那这个时候大家看像这种情况。我在这儿绑定的这个元素，那么最终触发这个点击事件的也是这个元素，所以呢，我们能用current target是不是找到它，同时我们一定可以用target找到，因为target呢，始终指向的是触发事件的元素呗。

好，那这是这个啊，这是这个，那么还有的小伙伴啊，如果说你实在分不清楚，你可以把这个event对象打印出来，到时候看一下在这两个里边，哪个里边能够找到你想要的这个啊内容。OK，那最后呢，再看一下我们这个知识点啊，我们需要在绑定事件的同时，通过ID去传一个属性，呃，这个ID属性对应的value值呢，就是你想导入到event对象里面的数据。好，那有了这个我们可以干嘛呢？大家看在绑定事件的时候，我们现在收集表单上的内容，是不是要区分一下，我到底收集的是手机号的呢，还是密码啊，那这个时候呢，我们就可以用这个。ID向对象去传参，然后呢，这里呢，我ID呢叫phone，下边这个ID呢，我叫它啊pass word。

那这样的话呢，我们就可以在对应的event对象中。我是不是能够找到一个参数，你就点啊这里呢，我就用这个current target吧，可能有的小伙伴没用过啊，我就用它点ID是不是能够拿到这个类型。没有问题，那接下来呢，我们做一个这样一个输出啊，我把type跟对应的value值都给它输出一下，那这个呢，我就放到下边了啊，上面这个咱就不要了。好了，那现在啊，来到我们的模拟器里边。来来到双lo啊，这里我输个123，你看是缝没有问题，下面呢，我输个诶。ASD，诶，你看password没有问题。好的，那现在我们是不是可以利用这个ID能够向对象传插，并且呢，能够拿到它。

来，那知道了这个到底是哪个表单项，那么接下来我们是不是就可以去更新对应的数据了。那接下来我们应该怎么做？大家可以思考一下。啊，可能有的小伙伴说我们去判断一下这个type的类型就OK了，注意这里呢，我不用去判断，你看我怎么写啊，这呢我写个raise.set data，我们上来就去更新，我们要更新的目标数据是phone和password，那这个时候你会发现，诶，我这儿的phone和password是不是正好和我传进来的K一模一样呀？那么现在这个type的取值有两种对吧，它的取值有两种，要不然是缝啊，要不然是。Password呗，那这两个是不是正好跟这两个一模一样啊，所以我可以这样去写啊，我们要修改的表单项呢，是这个type。注意，因为type是个变量啊，而我们在对象里面操作属性啊，如果是个变量，是不是要用中文号后边的value。

那不就是他吗？放到这里，这样就好了。来，我们先看效果啊，来来到我的模拟器，打开我们的APP data。好的，那现在呢，初始化都为空啊，我上面呢输个123来，下边呢来个asb。嗯，ASD，哎，大家看就好了，那这样的话呢，是比是否要比我们去判断还要省事一点，哎，这里呢，就是说如果大家对之前原生GS东西足够熟熟悉的话，你会发现有些事情呢，通过我们的设计呢，会使我们的编程更简单一些，这就是为什么我这故意用ID为phone和password。来传递数据。好了，那这是这个啊，那知道了这个以后，那我们再看啊，刚才呢，我们是通过ID传的，对吧，那么接下来我们再看啊。

这后面呢，还有一个叫贝塔杠，然后氦对应的value值呢，是微信字符串啊，那这个是干嘛的呢？来我们再看这个这两个。那么除了ID呢，它还有一个属性叫data set对应的是个对象啊，在这个对象里面大家看啊，K为汉，Value为微信。哎，那看到这个回头自然看这你就懂了，那这个呢，其实是向event对象传插的另外一种方式，贝塔杠呢，是固定的语法，而后边这个汉相当于是我们定义的K，而对应的value呢，那就是这个K对应的value值。只不过啊，用data杠的形式向invent对象往进导数据的话呢，它会放到这个data set对象里面，也说我们叫ID而言的话，我们多了一次。来，那我们也用一下啊，那现在呢，我要改一种，我这儿呢，用这个贝塔杠。

Type吧。嗯，对应的呢是什么呀，那这个呢，就是phone，然后呢，下面这个呢，我们也换一下啊，Data gun type，那这个呢，应该是那个password。两个注意啊，那这一把的K。是不是叫type了，所以我们要获取的话，那这我给大家注解了啊，那这个呢是用ID。哎，传值。嗯嗯，传值，那么下边我们再来一个啊，那接下来呢，我let time，那就等于event.time target.data set.type。啊，Data set.type注意多了一层，那么这个type为什么叫它呢？因为我们声明的K叫type。好，那么接下来在使用的话，下边是不需要动的啊来，那这个时候呢，来到模拟器里边，我们再看一下。

好的，那输入一下手机号123来密码来ASD，哎，是不是也是好的呀，没有问题，OK，那也就是说像对象传插呢，有两种方式啊，那这种呢，是使用data塔杠K啊等于value的形式，上边是用ID传值的形式，对不对，那问题来了。那。他呢，为我们提供了两种。哎，很明显，以当前我们的需求来看，ID的形式呢，会更简单一些。你的data，你的这个data塔杠的形式呢，是不是还是要多一层啊，那么为什么还要为我们提供这一种形式呢？大家可以思考一下。啊，对，很明显嘛，ID通常表示是唯一的，那么什么样的场景适合用ID呢？它通常只需要传一个唯一的标识用ID，而贝塔杠的形式呢？那后面的K是不是可以自定义啊？

对吧。那这个就没有什么限制了，也就是说我们用data杠的形式呢，是可以传多个参数进去的，比如说我再写一个data-test，我来个ABC。那那下面这个呢，我们也来一个啊data高test ABC诶稍等我们把这个复制一份。放到下边，那这样的话呢，是不是相当于用data塔杠的形式去向这个世界的event对象呢，传了两个数据呀，那对呢，来到这个里边呢，我们给大家打印一下这个应用堂，一看就好了。好的，那这个时候来到模拟器里面，Cons输123，来到event对象啊，找到current target，打开我们的data set，你会发现，诶，是不是传俩一个type，是我们刚才用的text text呢是刚才后传的。啊，那这样的话我们就能啊对比出来什么时候用ID呢，当你传一个唯一的标识，什么时候用对塔杠呢，当你向even的对象呢，需要传多个数据进去，我们用贝塔杠的形式。

好的，那么这节课呢？我们最终实现的是收集表单项的数据到我们的贝塔中。而用到的知识点呢，是向event对象。视线回调event对象传插用到的方法呢，有两种，一种是ID，一种是贝塔杠，OK，那么这节课呢，我们先讲到这里。