00:00
大家好,我是学习园地的特约讲师高洛峰,前面呢咱们学习了计算属性,那这节课呢,咱们继续学习VI模板的语法,我们来看一下事件监听,事件监听呢,咱们前面在VIVO的一个体验的时候呢,也经常用到。那它的,呃,绑定的指令是V方O,那缩写呢是艾特福,也就是语法堂写法,那这节课呢,我们在详细的将事件监听给大家介绍一下,还有一些其他的语法为用里边给我们提供的,那这里边呢,我就不讲太多的关于事件监听的原理性的东西,因为在开发中呢,是需要经常和用户交互的,都需要视频中听,如果你学到模板这个阶段了,呃,不管是为也好,还是艾也好,那前面呢一定学过GS的基础语法,比如盗的操作或者是解query,那在盗操作里面,那时间监听了,嗯,刚入门的时候肯定会详细的学习讲解,那在解query呢,又会再学习一遍时间监听,这里边我们再讲一遍实验进听原理,也没有那个必要了,那这里边呢,就直接学习谓语will的语法。就直接看未给我们提供时间监听是什么样的原理都是一样的啊,这个就不多说了,那咱们在详细的应用的时候呢,后边的案例呢,也会一直用到,那在咱们的项目阶段呢,也会一直用到,所以呢,咱们这节课就是讲will模板的语法。
01:14
里边如何处理时间监听,它的一些细节,咱们把语法都讲到对吧,原理东西前面学过就不重复了啊来看一下时间监听,那我们呃再做一个例子。打开这个,打开浏览器,这是我把原来的上节课的例子已经复制了一份,又回到了一个最基本的一个例子,那比如说我们做一个按钮do。这样的,然后呢,我们来一个加号,这里边那第一个应该是减号,我们还做原来的例子,大家看起来比较舒服一些,对吧,然后input,然后我们这块来一个SS等于二随便写示一个Bo,我们再来一个加号,你看。事件监听,我们使用的是V22冒号,这样的是事件监听,绑定时间监听,那具体有什么事件,你前面学过的几十个事件都可以用,只不过语法,比如说在GS里边是用on什么可立点击前面都有个on,那在我们will呢,这和解拍一样,是不需要前面这个词的。
02:10
事件绑定,然后后边就是事件处理程序,事件处理程序后边就是在这里边,比如说我们点击事件,我们要一点击的时候,我们要中间这个内容再加对不对,那我们这块就声明一个,比如说nu。呃,冒号默认等于零对吧?是这样的,那我们可以是双向绑定,这里边V杠,呃,Model。绑定一个值,绑定什么呢?A,你看这也是一种绑定属性的一个方法啊,把这个属性跟我们这个值绑定上,那这个值变化,那这里边直接变化,这里边直变化,这个直接变化其实是这意思啊,然后我们再看一下。再使用一个,它有简写方式,艾语法堂语法糖的方式,简写方式比较多,你看它的事件有多少啊,你看。动作。有这么多事件你都可以去用,你比如说鼠标进入,鼠标离开,鼠标进入离开尽量用这个,不然里边如果有其他的事件的话,事件就是比如放到一个组件上,有鼠标进去的事件,那鼠进去这个组件里边如果还有一些事件的话,那他就有可能说会直接就离开了,用这个就可以取消那个,对吧?所以这也是进入离开,那这个也是鼠标进入离开,我们平时写的时候,如果组件里边就是元素上面还有事件的话,那我们通常用这种方式是比较多的啊。
03:23
啊,这里边就不给大家详细的说了,这跟几块的那个原理是一样的。然后我们在click click点击的时候,我们嗯,要。一个事件这里边,那我们直接这里边,比如说要nu减减减写啊,这里边要nu加价就可以了,来。直接运行一下,这里面就要按钮。要加量对吧,变化平一点变化,当然了,我们还可以把这种方式我们写成什么,我们可以把这种方式我们加一个加一个换行。加一个括号,然后我们再粘贴一下它的事件,在写的时候里边可以直接放方法,也就是相当于事件数成直接调一个函数,那我们这里比如说添加可以加括号,也可以不加括号,用调用方法,这跟我们以前的方法都是一样的,你看我一个加括号的,一个不加括号的,这是仅点啊,写错subb这话是啊,加加我们叫abd嘛,当然你命什么名都行,你叫万two s瑞啊什么的都可以啊,但是命名一定最好是有点意义对吧?那我们用对象的增险想法。
04:22
加加的时候一点击我们就用这个,减点的时候就减点的时候我们点就用这个,加加的时候我们一点击就用这个,当然了,这里边是接的对象的格式,中间我们就用什么,我们得用逗号隔开对吧,然后这里边使用Z次里边的n nu就判断了啊,减减,然后这里边我们使用z.nu加加,我们只要看到它的变化就行,你看。当然你看这双向绑定这个值变上面值也是跟着变的啊。上面直也是跟着变的,那如果你哪个里边数字是单独的,那就不会出现这样的一个问题对吧。购买数量单独的写在数组里边就不会了,因为他们用的是同一个变量,所以呢两个都会有变化,是这样的一个情况,这就是我们事件监听,这里边给大家讲的是两种对比,一种是什么?我们使用这种绑定事件,或者使用语法堂绑定事件,那绑定事件的时候呢,我们可以使用带括号的,也可以使用不带括号的,都是可以的,这跟我们以前学的语法是很相似的。
05:18
那事件有多少种呢?有几十种,其他像几块里的提供事件这里边都有,当然还有一些will里面自带的一些事件啊,那这些事件这样的语法都是通过will的引擎帮我们去完成的,不是原生的事件的方法,大家这一大家这一点要清楚啊,是will里边给我们提供的,那解块的事件,是解块给我提供的,不是原生的这样的结构对吧,和我们呃,其他的学基础的语法呢,也没有什么太大的变化。那这是咱们加事件的方法,那具体什么事件,你就根据你的业务情况去定价,是鼠标放上事件,离开事件呢,还是重播事件呢等等对吧,自己根据业务去评价的语法是这样的,那我们现在还要介绍一个。你再复制一下。
06:01
然后我们第二换一行。啊,我们粘贴过来,那对于这种方法,对于这种方法来说,那我们有的时候呢,特别是在我们学记本语法里边有事件监听器,什么意思呢?就是这事件发生的时候,记录到一个对象里边去,会有一个事件监听器,也就是我们在这里边,如果我们存参数,你看我们这里边是可以存参数的,存一个哈,对吧,或者传一个数字,你加的时候从哪个地方开始减,或者减几对吧,你都可以通过参数传过来,那我们在这里边是不是就得接受一个参数啊,对吧,比如说接收一个参数,P参数,你说明你可以自己随便写嘛,对吧,我们嗯使用P点。Rog打印一下,我们只在这打印一下,这样的话,我们第三个参数我们在减这块加的时候你看。Hello,点击一下这个哈,就执行一下对吧,那如果我没传参数的,我这里边你看我调用的时候。幂称参数,但是我声明的时候,如果有参数调用的时候没存在,声明的时候如果传一个参数,比如说我传一个E变这个变量名,你随便写啊rog你看那我们再点这个加号的时候。
07:06
你看。是有值的,看到了吗?是鼠标监听。啊,是监听事件,监听对象我们往上放一下。也就是如果你没存参数的话,但是呢,调用的时候没存参数,但是我声明的是存参数,这个参数就是事件间定,它记录这个事件的整个过程,记录这个事件,比如说我们点击的位置在屏幕的哪个位置,事件是什么,对不对,点击的事件点击的时候在这个组件上。这个点击组件的这个位置是什么都有。啊,然后呢,下边可以展开,这里边还有一些其他的。当然这都跟没有有关的,如果你能用到对吧,你就用一下,如果用不到,那你就不存这个时间对象。那既然有这样声明有实件对象,如果你不存参数,但声明的时候有参数,就默认是这个事件对象,他记录了这个事件的点击的过程,就像两个人如果发生了打架事件,对吧,被一个第三个人看见了,那警察去取证的时候就跟第三个人整个过程对吧?因为他是整个的目击证人,看到了全过程,那就在看到全过程里边就如实的说,对吧,谁跟谁打的,因为什么他有可能都知道,所以呢,事件在你点击这个过程中,那都被他进行到了,对吧。
08:20
那如果我在事件里边对吧,那如果我传个参数呢,就跟上面一样,我传一个我传一个100。那你现在看一下,我现在点击。这是。加号同性加。你看点击,如果我传参数了,就跟上边一样,你声明这个就不是默认的世界对象了。那如果我既想传我自己的参数,又想用到那个视频对象,这怎么办呢?那我们就需要用两个接收,你第一个接收的对吧,肯定是我们自己的,比如说N对吧,你随便写起变的名啊,那第二个参数我们接受E。
09:00
两两个,那有的说了,第二个接收一,那我这里边打印,打印这个E,我们再打印一下,再打一个N和E,我两个都打一下啊,那我传的时候,我如果就传一个参数,传一个100对吧,那默认第二个参数就是这个时间对象吗?来我们算新一下应该怎么发。来,我们点击一下。你看第二个是没有定义的,如果你传参数了,就会把那事件对象给覆盖掉了,就不是了,如果你不传参数,你一个参数都不传对吧,那么有可能我们第一个参数就是什么,就是我们的事件对象。应该重写出现。啊,你生为两个参数啊,就是你只要这里升为两个参数,不是一个参数,它就不会默认的,不知道传哪个啊,不是说默认第一个给你传上去,那我怎么办?两组传,我第一个传100对吧,那第二肯定现在是不是默认的事件对象,如果什么都不传的话,会有一个默认的事件对象,对吧?你看第二是没有定义,那第二参数我们怎么传呢?我们要手动的把我们事件对象传过去,那这块有一个类似于环境变量的高弧,因为烟机是固定的写法,这个就代表事件对象让你什么强制的手动的传进去,来我们再上新一下。
10:06
啊。你看100和事件对件,100个事件对象就可以了,所以是通过这个是将我们把事件对象给我们传进去啊。这是参数的问题。如果你用不上的话,那你就正常声命参数就可以了,如果用得上的话,用这个就可以获取到视频对象,在我们这里边去解码,那不像我们盗墓里边或者解块里边,我们因为咱们是声明式的,所以呢,遇到哪个组件或者是呃,哪个元素就在哪个元素上,直接用语法糖的方式,这种是最方便的去加事件,去加事件,而不像我们do里边是什么document,先获取到这个对象,然后再加监听再处理,对吧?那这里边不用,这里边就这种语法是我们最常用的,因为声明式的嘛,对吧,声明一个我们就在上面直接加事件,也比较直观,这种方法用的也是比较多的。那我们看完这个事件对上了,那我们再往下做。我们再看一下,在V里边给我们提供一些更简便的操作,就是微根号,或者就语法堂的什么事件修饰符号。
11:07
什么叫试镜修饰符呢?经常我们处理的,比如说就是冒泡操作,经常处理就冒泡操作,那我在这里边。给大家,嗯,写几个div吧,比如说div这里边我写上,呃,ID等于。Box,这是最外层的加一个,然后正好再来一个E,我把这个。嗯,放到这边看一下,这是div,然后里边我再来一个div。就是这样写,很快速的用那个语法写,然后BOS2第二层的,然后我这里边在第二层里边,比如说呃,来个按钮吧,Bo to。来个按钮,这个按钮呢,比如说。啊,最就是按钮。按钮就是一个按钮在里边对吧,然后呢,我们现在外层看不到这些东西,那我们写样,只能说现在咱们虽然没有学呃组件,但这本身是一个组件,组件的样式写在哪啊,写在这个区域里边,对那井号这块最外层的让它大一点报。
12:10
对吧,同样的是宽度,300像素高度。我们赢的是300像素,然后呢,给个背景颜色,V ckg RO,背景颜色最外层我们给到红色的,然后呢,我们在。复制一份。给个BOX2,呃,我们这块应该是100像素。一百五吧,一半150,然后这个地方也是150,那我们给一个。绿色的。GR每个绿色的,这样的话,你看我们这里边你看。外层是红色的,红色里边有个绿色的,绿色上面有个按钮,因为这是三层的关系,现在如果我在上面都加上事件。比如说在BOSS1里边,我们这块加一个事件这块你加上哦。
13:03
不是微杠啊,我们直接用语法堂,你比如说加个点击事件,等于我调用万方法。调换方法啊啊,加上括号判这一一个方法,然后呢,我加上负方法,这里面我加上。嗯,艾加上嗯方法三层。Three是最底层的,One是最外层的,或者你叫外层叫al对吧,然后in对吧,然后button按钮第三个叫什么都行对吧。然后呢,那我就不改名了,我就用one two three吧,三个方法在这里边我们加上三个方法。我就在下边省的嘛,这会Y方法。然后。方法。方法。经常我们在事件里边还有事件,这样的话就会形成冒泡,你看这里边我们反映一下,这里边我们输出,如果最外层的话,那我们输出一行一,如果第二层的话,我们输出一行二。
14:04
点rog第三层的话,我们输出一行酸。主要是让你看到我们点击事件的时候有什么变化,那现在我把把这个时间清除,那看一下如果我现在点击按钮会出现什么情况呢?你点击你看先给我们打印三从最底层,从最底层的执行,然后呢,第二层执行,然后在第一层执行,对吧,那从里层到最外层是不是相当于一个冒泡啊,对吧,那现在如果我想阻止这个冒泡行为,我只想让我们的什么。这个按钮有效果对吧,其他两层没有效果,因为我们其他两层是你点第二层的时候,那第二层和第一层和最外层对吧,他们两个有时间,那如果你就点击最外层的话,那现在只有一个最外层有试点,我就提高。专项时间对不对点这个。点这个对吧,所以有的时候我们点击这个事件的时候,这个事件,那么外层还有个按钮也有个事件,同样的事件名称就会实现成这个事件冒泡,它从里层往外一点点升,全部执行到这个时间,那如果我就想执行到这个按钮对不对,那我们这块有个点修饰符。
15:10
点修饰符,你看有这么多,它有很多这个点修饰符啊,有很多这里边也没有列全,你看stop就阻止时间状法,阻止时间状号,比如说我将另外从这个阻止了。我把这个清除省的,你看不出来它这个个数啊,你看我在这点stop s topp停止,那么我先保存了,我现在点击这个按钮的时候,你看对吧,点击这个按钮的时候啊,我现在在呃按钮上加的three three是不是三呢,对不对,打印的一号三,那没有打印二合一,但是我没有将to这个停止,那我点这个第二层的,它肯定第一层的也会执行,你看两个都会执行,如果我这个也想它停止的话,There stop。现在。我把这个清除掉,你看点第二层,也就是一个第二层了点第三层第三层了点,第一层第二层第三层第三层第一层第二层。这样的话就可以把这个冒泡给阻止,当然这冒泡的概念是我们前面一直学的,对吧。
16:05
来看一下还有什么呢?嗯,在当事件在该元素本身触发时,才触发该事件,嗯,这个什么意思呢?你比如说。我们把这个复制一份啊。周期复制一份。我往下来粘接一下,我把上边。注释一下,就是每一个给你留着,留一份,相当于那如果我在这块你看啊,我这块不用冒泡处理。不用冒号处理,那我这块加上一个。Self,你看第二层我加个self,那它会出现什么情况呢?你看啊,我们不用,当然不用刷新了,刷新我只是清空一下下面数据啊,当我点击按钮的时候,我没有点击按钮,是最里边这层,然后第二层我加了一个self,它相当于阻止了谁啊,只有我们鼠标当我们点到第二层的时候,这个事件才有效果,所以呢,它相当于这层的事件,中间这层都阻止了,但是不会阻止我们按钮。
17:02
因为点击就按钮嘛,按钮肯定不会阻止嘛,和最外层这个不会给我们阻止,点击你看三和一对吧,只有这个去阻止,那我们点第二层的时候,那第二层和第三层。对吧,也就是和这个Y这块才能够一起显示,所以说这个self什么意思,就是当事件在该元素本身触发时,才触发时间。但他不会阻止事件,只是在该元素本身触发的时候。才能触发别人通过冒泡什么处罚不了它,触发不了它,所以呢,这个冒泡你就可以跳过一层元素,它是中间这层跳过它对吧,然后执行其他的,那能不能串行呢?你看我现在。一点击第二层的时候,这个绿色的时候,那它本身执行了,但是冒泡也执行了,我我既要点击one的时候不阻止它,我要点击这一步的时候,不让它有事点对吧,能不能串化呢?我再加一个点什么stop可不可以呢?你看我们把这个去掉。点击第二层看可以串行化对吧,就串行的去使用多个修饰符,那现在点击第一个按钮。
18:04
你看还是第二跳过是有效的。所以这是self的一个应用,我再复制一份。但这个用用不多了解一下啊。我把这些都去掉扇形的大家也知道了啊,现在又回到了什么,又回到了最原始的这种对吧?事件,那现在我点击按钮,你看是从最里层一直向外冒泡对吧,然后第二层第三层,然后它下边这层,再它下边这层就是最下面这层就是最外层嘛,对吧,321,那如果我们现在用上这个属性。这个属性。啊,补货这个事件,那加哪个哪个先补货,你看现在。嗯。正好我们现在在这个地方,加上。这个你看有这么多呢,这么多时间,这这么多修复符,点那个工具里边会给我们提示出来有很多啊,那假如我加上这个,加上这个的时候,原来是321看到这个顺序,现在我们一点。
19:01
你看132什么呢,加上这个就是在整个重叠的事件当中,他会优先捕获这个事件。有万这个优先补货,所以先打印这一先删掉再执行一下,你看132,那如果我在这块再加一个。再加一个这个。捕获事件,那现在我在点击按钮的时候,就会什么,就会把顺序完全颠覆对吧,因为补货补货补货对不对,你看。就变成了123了。咱们最早如果这俩都不加的话,是321对不对,从里从最里边的按钮到第二层到三层这样的宝宝顺序,如果加那个补货的话,那就什么先补货再补货,然后最后没有补货的这个才执行,可以改变这个冒泡的这个顺序,相当于是这样,因为补货时间监听了啊。复制一份,再给你保存一下。好,我们看看还有其他的什么试点。
20:01
这里面列的都是算是常用的,这个这个阻止默认事件,这个是特别常用的。是我比较爱用的,因为通常我们在事件在写呃页面的时候,经常会比如说用上A链接对吧,用上A链接,然后这说话啊。或者是表单,那么A链接和表单它都会有默认的提交事件对吧,那我们假如说为了去掉那个默认提交事件,在我们以前的方法呢,都是什么反回甲对吧,或者阻止事件等等这样的一个方式,还有最笨的方法是什么呢?我不用A标签和标单,不用别的去模拟,它就没有这种元素本身的默认事件了,因为A的标签,比如说HTP冒号。S括号3W点,嗯,L k.com,比如说号我们来一个学习原地。对吧,本身1.a,它就有事件,就是有往这个位置跳转的这样的一个事件,对吧,现在1.d肯定是跳转了,对吧。
21:00
一年级肯定做到了。对吧,又调回来了,是这样的一个情况。那我们有的时候呢,会在这个上面,我们在加上我们的事件click点击的时候,比如说调用一个方法,调用一个啊DEMO吧,一个方法。这样,那我们在这块写一个。下面吗?写一个DEMO的方法,我就不说以前不用VI的时候,其他的那个怎么阻止的了,咱们看没有怎么阻止这种本身A链接和表单他们有一个。呃,默认的。农夫人的事件就是点击率这样的事件。现在我们现在想点击的时候,想自己去处理程序,那他说为什么用A标签啊,你还不要这个hi FA标什么作用啊,那通常我们在写样式的时候,有的时候A标签我们统一给A标签一些样式,以A标签样式符合我们一些提交方式的一个,呃情况,我们换别的标签还得重新写样式,所以还用A标签,但A标签有没有提交,这怎么办呢?这时候我们再加时间的时候,我们在这个地方我们只要加上一个。
22:03
这个属性它就会给我们阻止它本身的一个样式,不是不是样上本身的一个时间,它就保持提交了,你看你先点击,你看下边这号没有给我提交,点击点击点击点击。对吧,当然表单里边的submit的按钮也是这样的去做的啊。也是去这样去做的。那这里边儿还有一个属性,最后再讲一个啊,万事件只处罚一次,这个什么意思呢?什么叫事件只处罚一次呢。很好理解啊,也不常用啊,比如说点就串行的了,这样的一个方式,你看。我们这里边清空一下,刷新一下吧,重新来一下,你看这里边没有记录了,我原来可以点击多次,我现在点击一下,点击一次没问题,那我再点击。那点击一次没问题,再点击怎么着就失效了,对吧。点击一次,我再点击你看跳转了对不对,也就是只要我们有一次有效,再点击就失效,这个事件就不管用了,那不管用了,你看走原来的时间就提交了。
23:03
所以有的时候我们这么串行化用的时候,就是点击一次的时候,我们执行一个什么特效,那如果再点击,那就直接跳转,你比如说是一个选项卡的一个切换,那我们有可能点击一下是切换选项卡,对吧,那都切换过来了,如果你再点,那就变成什么了,就跳转到它的一个详情页面了。就类似于这样,那创业化的时候可以这么趁串是调用,链式调用啊。可以这样用,当然了,世界有很多几十个这样的,也应该也有几十个,对不对,但其他都不常用,绝对几个就差不多了啊,那具体的遇到你知道这种语法。就可以。那就总结一下,你看。开发中需要用户交互,这个是绑定时间监听解写方法,在参数的时候我们怎么用,怎么把时间监听这个对象给我们加上对不对,默认是什么样的加,你自己算参数是什么样的,然后说饰朋友更多,好,谢谢大家,这。
我来说两句