00:00
好嘞,各位,那在这一小节呢,咱们来学一下里的这个事件修饰符,你先不用琢磨啊,说老师修饰符是什么意思呀,一会儿我写个效果啊,你就懂了,打开我已经提前写好了这个欢迎词啊,配好了这些数据是吧?在这儿呢,我写一个A标签啊,给他配一个跳转的地址,嗯,随便写一个地址啊,学校官网。A标签里面呢,咱们写一个文字,点我提示信息,然后我的要求呢,是这样点击A标签啊,能够正常的弹窗,还是说同学你好那四个字,所以说呢,肯定得给他一个点击事件回调的名字呢,还叫受银否,然后在这儿呢,我得配置一下是吧,好把它拿过来,里边的alert同学你好好打开瞧一下效果啊各位。点击一下确实弹窗了,但是你注意他接下来的动作,点击确定他是不是跳走了呀,好,回来我不想让他跳走,那怎么办?哎,跳走啊,是A标签的一个默认行为,所以说我要阻止掉这个默认行为,如果你基础还不错的话,你知道怎么阻止,我在这儿是不是收到了一个event呀,啊,我就不用event了,我就用这个E这个行参去代替了,身上呢,有一个方法叫做1.preventdefault,不就是阻止默认行为吗?哎,那我们来看一下啊,刷新走弹窗了吧,点确定看不跳走。
01:28
在view当中呢,你不用亲自的写这个东西去阻止掉这个默认行为,你完全可以把它删掉,然后在这个click事件名的后边啊,你来一个点儿prevent就可以阻止掉这个默认事件,这个prevent就是prevent default啊,那个方法开头的那个单词,这个prevent就是属于事件修饰符,你体会体会我用的什么事件呢?Click事件。那我对这个事件进行了一个修饰,修饰的结果就是什么呀?这个默认的行为是不是被我阻止掉了?好了,那你回头看一下效果啊,刷新走弹不弹,但是跳吗?不跳哎,那view一共给我们准备了几个事件修饰符呢?一共有六个啊,前三个吧,比较常用,后边的这三个吧,很少见啊,但是我们也跟大家说一下好了,阻止默认事件这个啊,你已经用过了,那我就把这个呢给它复制过来,在这写好注释,好再往下看一个,接下来这个呢,大家应该也熟悉,就是阻止事件冒泡是吧?好,把这注释呢,先给它写上组止冒泡,写一个结构,Div里边有一个按钮,还是点我提示信息啊,然后按钮啊,上头有点击事件的,我把这个呢给它拿过来啊,先不加这个修饰符,然后巧就巧在啊,外边的div啊,它也有点击事件,然后呢,我简单写点儿样式啊,让你能看到那个div,比如说的它的名字叫。
02:55
做DEMO1吧,一会我还得写一些别的,就叫DEMO1了啊,然后在这儿呢,写一个style demo1,诶好,给他一个高度吧,高度是50,给它一个背景色,背景色呢,它是天蓝色,好,就简单这么一写啊,回到页面看一下效果啊,那这块呢,离得有点近了是吧?哎,那我这样做吧,各位我调整一下,我写一个通配符,我让所有元素之间呢都有一个20PX的间距,好吧,因为一会儿呢,我要演示其他剩下的那几个还得再写结构啊,回到这儿,诶,就间隔开了是吧,你看啊,我点击这个按钮来走弹窗了吧,你看它的后续动作啊,我点完确定各位走,是不是又弹了一次,这不就是典型的事件冒泡吗?在这儿就不过多解释了,点的是按钮,但是最后冒泡冒到了谁的身上啊?Div的身上,我想阻止事件冒泡怎么办?借助E也可以一点,大家还能记得那个API吗?啊,叫stop propagation就能阻止这个。
03:55
冒泡了,好了,我们看一下啊,刷新点击按钮弹窗了吧,点确定,你看只弹了一下view当中,同理,也不需要你自己去写,你在这个click的后面啊,加一个点stop就可以了,停下来是不?你注意啊,我是给这个button加的stop,我们不用去给外边的这个加,但如果说你div外边还有一层结构,那个结构也能响应,那你这个是不是也得加个stop呀?哎,所以说现在呢,我在里边加就可以了。好了来刷新一下,走弹了吧,各位,诶走是吧,没有再弹第二下,好,这就是阻止冒泡,好了再来一个,这个就挺有意思的啊,叫做事件只会触发一次,这个也挺常用的,就是有的时候啊,页面上有一个按钮,你点了一次啊,它弹窗,然后以后再点的时候不希望它再弹窗了,这就是属于事件只触发一次啊,我们把这个按钮呢,给它拿过来,诶就这个给它写在这儿,注释呢,咱也写好啊,给它补在这儿,叫做事件只触发一次。
04:55
走,然后就不用写这stop了是吧,把它删掉,然后你看现在啊,我点这个按钮的时候,来到这儿一点就弹窗,再点还弹窗,但是如果你在这加了一个点5万次,5万次什么意思啊,一次性的好回来刷新一波,点第一次的时候啊,的确可以再点呢,它就失效了是吧?好还有一个啊,就是capture,咱们之前在讲这个S基础的时候呀,其实有一个说法叫做GS里的事件流啊,是分为补货阶段和冒泡阶段的,你还记得吗?来简单聊聊各位啊,我先写一个小结构,嗯,先把这个给它粘过来啊,走,我写这么一个结构,有两个div啊,它俩是嵌套的,第一个div里写的文字呢,就是DIV1,然后里边还有一个div啊,里边写的是div几呢是二,好,然后呢,我也给他俩写点简单的样式啊,写一个class,第一个呢就叫做BOX1啊,第二个呢叫做BOX2好了。
05:55
爬到上方简单写点样式走,这是BOX1,然后呢,便于观察,我给它加一个攀顶啊攀顶5PX,加了这个吧,它周围就有缝隙了,你就知道了,它俩是一个嵌套的关系啊,我要不写吧,你看页面现在这是特别丑,你不知道它俩这个层级关系啊好了,来,不墨迹了,直接写背景色呢,是天蓝色啊,这是BOX1,再来一个,这个也是5PX吧,然后颜色咱就换一下吧,比如说换成这个orange橙色好了,回来各位,嗯,诶这怎么一样了呢?啊,这会没改是吧,BOX2好了,同学,DIV2DIV1对吧?好,回到代码中,它俩呀,都能响应点击事件,所以说我就把这个呢,就直接拿过来啊,放在这儿走,但是我不加这个one是吧,正常的点击时间,然后呢,我换一下,不让它是这个受音fo了,叫做show message啊,展示信息。
06:44
然后把这个东西呢,复制一份给他也来一个啊,那我下边就得配置这个show message是吧?Show message呢,它最大的特点就是我能接到一些消息啊,不总说同学你好了啊,然后比如说在这儿呢,我先用一个lo去代替,先不写这alert message,就你给我啥,我控制台就输出啥是不好了,滑到上方,然后我的要求呢是这样。
07:08
当你触发了DIV2,就是这个BOX2的点击事件,那就把数字二传进来,当你触发了那个BOX1,就把一传进来,我这么写是不是没毛病,哎,各位看看啊,来,这不是外边那个吗?这不里边那个吗?好了,那同学你说我就写到这个程度,然后我就不操作了,你说现在页面上是什么效果呢?当我去点击这个DIV2的时候。同学,这是一个嵌套的结构对不对,而且我没有阻止冒泡对不对,我点击里边的这个外边的那个一定也能受到影响,对不对?好,那我们看一下啊,它输出的顺序呢,应该是这样的,打开控制台刷新一波,同学,我点的是二啊走你你看是不是二一。因为大家都知道啊,咱们去点击里边这个DIV2的时候,其实它先经过的一个阶段是事件捕获,随后才是咱们所说的那个事件冒泡,你说对吧?而默认的情况下,咱们这个事件冒泡阶段才是去处理事件的,对不?也就是说是这么一个图,大家还记得吧,就是诶走这儿,诶在走这,这是什么阶段?补货阶段,补货阶段是由外往内的,对不对?随后再出发的是什么呢?冒泡阶段,冒泡阶段是由内往外的,对不?我想调整一下。
08:20
啊,就是我不想让他在冒泡阶段去处理事件,那你冒泡的话肯定是点的是DIV2,随后才能冒泡到DIV1身上,所以说输出的当然是二一,现在呢,我想让他在补货阶段就开始去处理事件,那你说我得咋办呀?各位来,回到代码当中,你就可以利用这个修饰符了,Capture你把它复制过来好,然后你看啊,我把它加在谁身上呢?我把它加在外边那个盒子的身上,点capture。这个时候同学对于盒子一来说,他的事件就是在补货阶段就开始处理了,那咱说了先补货再冒泡对吧,所以说这个时候你瞧一下,就算你点二啊走你点你看是不是一和二,哎,所以说这个东西呢,同学用的不多啊,那还有一个就是self这个呢,其实也挺有意思的啊,各位你读一读加上了这个修饰符啊,他能怎么的,你读。
09:15
说只有点target是当前操作的元素时才触发时间啊,这改一下啊时候的时啥意思呀,这话读完了好像没懂呢,是吧,拿一个例子去写啊,把这个给它复制过来,然后呢写在这儿,注释呢也给它写好。把这一堆拿过来。好同学看着我把stop删掉,就是不阻止冒泡呗,我点击这个按钮,先触发这个冒泡过来,是不是再触发这个呀?哎,那你看一下效果啊,刷新一下点这个啊来走啊同学你好,再来是不是又是同学你好呀,好,回来那说老师,那你这不就是刚才那个没阻止冒泡那个效果吗?啊来咱这样啊同学我来到这儿来调整一下,先暂时把同学拟好这个助掉,咱们输出一个东西啊,输出谁呢?1.target,你看看它是谁啊各位,我可是点的这按钮啊,我知道后来div身上的click事件也被触发了,但是那可是冒泡冒上去的,你说对不?哎,你看一下效果,各位啊,我点的可是按钮啊,来走同学,其实你发现这个event.target都是谁那个按钮,因为你点的本身就是按钮嘛,啊,发生事件的这个人不就是这个按钮嘛,所以说他冒泡,无论冒到哪去,点target永远都是那个按钮,不可能是说哎。
10:38
老师冒泡到这儿了,那是不是就变成div了呀,不是,哎,然后呢,你在这儿给他加一个点self,哎,你看看是啥效果啊各位我是不是加了这个点self呀,来咱慢慢分析,同学来我给谁加的点self修饰。你给这个cli,那这个cli是管谁的呢?管这div的,那你加了这个东西的意思就是如果以后有人触发了这个div身上的click,并且1.target还得是div的时候,是不是才能帮你去调用这个受音fo呀,那你像刚才这种情况就不是你点的是按钮对吗?啊,是你冒泡冒到他身上了,确实触发,但是我问你一点,他给的是谁呀,是这button,所以说这个会执行吗?不会,所以说你觉不觉得从某种程度上来说,你用这个self修饰符也能阻止冒泡啊,哎,我们来感受一下,来到这刷新点的是按钮哈,来走同学,是不是只有一个按钮,不会再触发下边的那个了吧?哎,因为被self修饰了,这个呢,用的也不多啊,来,我把这注掉,把这个给它打开,诶把这个给它打开好瞧一下效果啊,一点弹窗,而且只弹一次,好还有一个那这个啊用的就更少了各位。
11:55
啊,叫做passive这个东西呢,我不知道各位在学这个基础阶段啊,有没有这个听过这个啊,有的时候呢,可能这个东西都被精简掉了,就是咱也没有去大家仔细的说啊,这个东西是干嘛的呢?你读一读说事件的默认行为立即执行,无需等待事件的回调执行完毕,这个呢,必须得写一个小案例啊,才能把它演示明白啊,那这样我把这块呢,给它复制过来。
12:20
你瞄紧我接下来写的结构啊,各位,我写一个ul,嗯,里边呢,是一个一个的Li,有四个数字,分别是1234,好,然后呢,我给这ul啊,简单写点儿样式。给它起个什么名呢?叫做list吧,复制滑到上方点list,嗯,让它有一个宽度是200,高度呢,也让它200,一个正方形吧,给它一个背景色,背景色呢,咱们换一下,比如说换成这个这颜色吧,是吧,哎,深深一点的这个橙色,好写完之后呢,我再给这里边的Li啊,再给它设计点高度,让每一个Li是多高呢?我看看啊,整体是,哎,这是200是吧,整体是200,我有四个元素,那这样同学我让它每一个的高度啊,是100,说老师那放不下了呀,啊那回头看一眼确实放不下对吧?你看这滚动条就出来了,是不是溢出去了,子元素从负元素中溢出嘛,我想让它形成滚动条,那怎么办呀,在这写一个overflow什么呀,Out凸W就可以,对吧,不够的时候,自然而然的滚动条就出来了,哎,就是这么一个效果对吧,哎可以滚动。
13:30
接下来呢,我给ul绑定一个滚动事件啊,那往下走找到这个ul怎么写呀,艾符那同学关于滚动其实是有两个单词的,我不知道各位知不知道啊,第一个是score,这是比较通用的一个单词滚动嘛啊然后呢,写一个比如说叫做DEMO,那你说我在这儿怎么办?是得配置一个DEMO呀,复制一份,这呢写个逗号,名字一改叫DEMO,那这会儿也不收到什么参数了啊,只要一滚动呢,就输出这个艾符。
14:00
各位,值得你注意的是啊,这个SC呢,是给滚动条加的滚动事件啊,朱老师,滚动条得怎么滚动啊,你可以按上键盘那个上下的按钮去滚动,你可以滚动鼠标的滚轮去滚动,对不好了,回来我们看一眼啊,鼠标放在这儿来滚动一下是吧,我再滚动一下。24我再滚动一下是不是36这个是滚动条的滚动是吧?来还有一个同学啊叫什么呢?不叫score叫这个。Will,这个是啥呢?鼠标滚动轮的滚动,刚才是滚动条如果发生上下的移动去触发SC,这个是鼠标的滚轮,如果上下滚动了,触发的是这个,好,那你看一下啊,我滚动一下鼠标的滚轮走,你看是不是一个,我再滚动一下是不是一个,我再滚动一下是不是一个鼠标滚轮滚动了一小截,但是你的滚动条可能上上下下走了好远,走了好多PX是不是。那它俩之间的区别是什么呢?有一个小区别啊,各位你看着啊,我现在绑定的是不是滚轮滚动事件,那你看着啊,就即便是它到这个位置了,不能再往下滚动了,然后呢,你看着我还在滚动鼠标的滚轮,你看走走走走是不是依然能出发,但是如果你用的是那个K,它就不会来,来我们试试好看效果啊,回来走同学是不是开始在这儿有响应吧,你看着现在呢,我摁上那个键盘的上下那按钮按下走,你看我没有滚动鼠标的滚轮,但是滚动条再往下走,那就能触发这个,因为你用的是score嘛啊来滚到最后的位置,同学你看,而且你滚动鼠标这个滚轮走看他也不往下走了,但是如果你用的是这个,哎,Will,那你看一下效果啊。
15:46
滚动条再滚动吧,但是我的鼠标滚轮没动,诶它就不会触发,然后到最后这已经不能再滚动了,但是只要你的滚动那个轮在动,诶它就能触发,对不好。那这两个东西说明白之后啊,我开始做一个事情,同学,我让它滚动的时候呢,处理一点复杂的任务啊,说老师有多复杂呢,我把这俩折叠起来啊,老复杂了啊,我写一个for循环啊,普通的for循环就行了,不用写这么麻烦啊,计数器用I,不用index,然后这个长度呢,我给他写多少次呢?循环来,我先写一个1万次啊,这块呢,给它改成这个I,嗯,别忘了这个分号里边干嘛呢?哎呀,老简单了,输出一个井号consolo井,对吧,这1万次好像有点不太够,来10万次,同学这个工作量就很大了啊,然后呢,整个这个循环结束之后啊,啊,我来一句是吧,那叫做累坏了,好来看一下效果啊各位,我现在用的是哪个事件?
16:43
滚轮事件对不对?Will,好了,回头你瞧一下效果啊各位。我没有滚动的啊,我接下来滚动哪怕一丢丢,我跟你讲这个事情就已经很复杂了,这个运算啊,来看着我滚动,那么一下子来走,同学我滚动了,你看仔细看同学这会儿是不是一直在这蹦蹦蹦在输出呢呀,但是我想问的是这个滚动条它往下走了吗?没有。
17:06
那咱就得说说这滚动条的为啥没往下走对吧?各位啊,来咱看看啊,是这样的,当你滚动了鼠标的这个滚轮之后啊,它首先呢,去触发你滚动那个事件啊,然后呢,去执行你所指定这个回调,这个回调执行完了之后,各位咋办?他再去执行默认行为,再把那滚动条往下动一下,也就是整个流程是我滚动了鼠标滚轮,随后触发DEMO函数的调用,DEMO函数调用完了,它再把那个滚动条往下走一丢丢,但是就是在这个环节我是不是浪费时间了,哎,所以说就会导致整个页面刚才有点卡顿,但是如果你用了这个东西,各位啊,Passive你就能明显的发现这个问题就解决了,那这样我们再观察一下,不加这个PASS5,你最后再看一眼啊来走各位。
18:02
打开了吧,控制台呢,也给你打开清掉,看着我滚动一下鼠标的滚轮,来走同学看一直在计数,一直在循环,但是这不动对吧,来给它关掉。啊,你得多点两下啊,有的时候可能关不掉,但如果你加了一个passive。你看pass是干嘛的,读读事件的默认行为会立即执行,哎,说的再直白点,那滚动条啊,先往下走,不用去等这个事件的回调执行完毕了。啊,不加这个东西就是先得执行事件的回调,回调执行完了我再去做我该做的事儿,就是把那个滚动条往下窜那么一丢丢,你看加了这个明显就好起来啊,来打开。再切到控制台,完了你看一下效果啊,清掉。放到这儿啊,同学看着啊,滚动。是不是往下滚动了,这是不是慢慢在这计数呢,我再滚动,你看优先响应我的滚动,然后这儿呢,你再计数去是吧,不受到那个的影响,哎,给这个关掉,说老师那这么说,这个东西用的挺多的呀,同学是这样的啊,不是所有的事件呢都存在这个问题,你比如说我不用will,我用这个score是不是也是滚动,这是滚动条往下或者往上这个移动,对吧,那你看一下这个,你各位瞧着啊,同学,我也不加这pass对不对,哎,我干这活呢也不少,这回呢你看一下。
19:21
打开控制台刷新,看着滚动。是不是优先响应我的这个滚动啊,那这边呢,那就计数呗,是吧,哎,所以说他也不是说有影响的,不是说什么事件都有影响,哎,这个passive呢,在一定程度上啊,可以去进行一些优化啊,什么时候用的多呢?跟大家说啊,如果你做的是移动端的项目,就是给平板和手机用的啊,那往往呢,这个passive呢,我们会使用一下好吧,诶,那截止到这儿呢,我们就把所有的事件修饰符啊,就都跟大家说了一下啊,然后呢,同学把前三个呀记住就可以了,后边这些呢,就当一个扩展去了解就可以好吧,嗯,那这一小节呢,我们停。
我来说两句