00:00
来,咱们接着上一节课来讲,上一节课呢,与解剖RY区别里面我们还有一个没讲,呃,叫世界委托,我为什么上一节课没有去讲它,是因为这个事件委托其实挺重要的啊,不管说你实际的开发当中还是面试当中都会遇到啊,我们先看一下解块RY里面这个事件委托。先问下大家什么叫世界委托?好。现在问你们一定要自己会组织语言把它说出来,因为你面试的时候,他就是问你,你得靠你说出来,你总不能往那一说,你说其实这个东西我知道,我就是不会说。对不对,咱们要自己要去表达出来,什么叫世界委托。感觉大家好像知道,好像又不会说的样子。自己不干。
01:01
让他办是吧。你要举这例子好像也行。世界委托是将子元素的世界委托给负元素,相相当于是委托在负元素身上。这是它的概念,那么世界委托的原理利用的是什么原理?冒号啊,那接下来再说一下世界委托有什么好处?啊,有什么好处?为什么要用世界委托我绑定在自己身上肯定也行啊。你想你实在说不出来去举例子,比如说一个ul里面有100个L。而且随后我有可能去新添加。那这个时候,比如说有一个世界,我需要绑定在M身上。哎,去触发它,那这样的话,如果说你要分别绑定的话,你得绑定100次甚至是更多,而且新添加的元素根本享用不了你之前绑定的事件。
02:09
那这个时候我们就要考虑利用世界委托的原理,是不是把它放在负元素身上。放在负元素身上有什么好处?我只需要绑定一次,而且新添加的子元素也可以去享用这个事件。就一次绑定,终身受益啊,就这个意思。这世界委托的东西啊,这个大家要知道,而且要知道,虽然说我的世界是不是委托在傅小树身上了。那我问你,最终触发这个事件的是负元素还是子元素?子元素,哪个子元素,我如何去找到它?通过什么来找?一点。Target是不是指向的是你触发事件的那个子元素啊,哎,这是世界委托里面的东西,这些东西大家要知道。
03:06
那在我们解query里边也有世界委托的方法,你们之前用过哪一个?但是之前在解里面应该是用过吧。哎,咱们之前大家应该用的是哪个单位。对不对。这个live答案应该是没接触过吧?我们可以去看一下来,我能找到我的这个开发文档,我们就拿1.7这个来看,找一下世界委托,它就叫世界委派。在这注意啊,这是不是有个地方还有大列贝塔,这两个都可以进行世界委托。都可以进行世界委托,那么大家之前用的是delegate,为什么用delegate呢?你看我这说一个live在1.7以上已经废除了。
04:01
所以我们其实现在不用它。但是你看这个1.7的文档,其实你是。哎哎哎。卡住了。你看1.7的文档,你是看不出来,他这1.7以上不能用的。这是我为什么我让大家去结合这个1.11的去看,你打开这个1.11的,咱们来找一下世界委托这一块是在这儿。首先你能看到leave这个方法是不一点七几啊,这个时候已经不能用了。而你在公司开发的时候,很有可能版本是高于1.t的,这个也很正常。到现在为止。用1.7的就很少了,那都是老项目。哎,所以我们要注意那带来的这个方法,哎,我们先来回顾一下。这个方法倒不难。大家看我这个结构下边我有个盒子,哎,给它一个ID为box,那么在它的下边有两个div子元素,我呢,分别给了他一个类。
05:04
哎,我打开一下页面,我们看到的效果是这样的。咱不能把不看。我把其他的全部关了它。其他全部关了,Two这个官网怎么打开放这边这样好看一点。那现在负元素是这个。这是一个子元素,这是一个子元素。啊,事先委托的好处是新添加的元素是不是也可以去享用这个时间,那这个时候我可以先给box啊。我去的子元素。这没问题吧,在解块人里边,你比如说我添加一个他,他有时候还不给我什么自动补全。这一版我是新添加的。啊,新添加的,然后呢,新添加这个P标签,你得整一个类,现在这是不是有个A。
06:02
这个A5上面肯定设置样品。哎,我给他一个类在这呢,因为我们不能用配置对象,所以我直接在这个我添加K标签的同时,是不是可以给它带一个类啊来我们先看一下,我刷新一下是不是新添加那个和上面这个用的是共用一个类。好,这是新添加的主元素,而我在上面进行了一次世界委托。Delegate这个方法使用的方式是先找到你要委托的副元素。然后调用这个方法。在这个里面我们需要传参,一共传三个参数。第一个参数是你要委托的子元素。我这是不是给了个点a.a表示是带有class a的这个类的子元素。第二个参数大家应该知道是干嘛的。委托的事件。
07:02
而第三个参数是不是触发世界的回调函数?那我们来开一把。刷新一下世界,委托的好处是,我新添加的子元素是不是也能享用这个世界,这是重点。没问题啊,没问题。好,这是delegate这种方式,然后呢,再给大家说一种方式,其实这个delegate用它没问题,现在还有一种方式通用的啊,先找到负元素,我可以用二的进行事件委托。On通常是不绑定事件的,On呢,进行世界委托也简单啊,他传参的方式前两个正好相反,第一个是你要委托的世界,第二个呢是要委托的累。而第三个是一样的是什么回调函数?也好记,你拿奥记二的时候记住了奥克利,它后边紧跟着是世界。进而你再去想单的正好和它相反就OK了。
08:02
这没问题吧,然后我去alert一下,比如说这一把是A。触发的事件。我们先来看下行不行。刷新一下走你。没问题,这是不是也能触发。好,现在他能触发了,然后我去复制一份。这个分号我得换成英文的。那这一把我这画一下,我们是不是还有个内角B的。我呢,给B这也进行一下世界委托,好没问题,接下来我做这么一个操作,哎,大家看到我Dollar服Dollar瑞是谁啊?Box,那说明你对这个事件委托还是没理解?这个我们你比如说我直接去,你说是box还是class诶。
09:04
来,我们看一下。刷新我咔一点击这谁呀。Class a代表的那个,哎,Do元素吧,那大家为什么说是box呢?说box说明你还是没有理解世界委托它底层的东西。咱们刚刚说了,真正触发这个事件是不是函数子元素?虽然你看到哎,Boss点二了,这儿只是委托给boss,但是我触发是不是还是我的子元素,你要记住这儿打印这个例子是说的是谁最终来去触发调用这个轨的函数法,那是不是肯定是A。没问题吧?然后我写的Dollar的意思是相当分装为解号的对象。接着大家这个应该是用过remove class。这是不是移除它这个类。接着我再去做一个操作,And class。
10:01
这应该写个B就可以了。那这个呢。我这里应该不传插也可以。我就是把当前这个A相当于移除了,给它替换成B。能走不?那这个时候我们来看一下走底。也就当我alert阻塞以后,我一点确定它是把切换成B这个类了,切换成B这个类对应的我们能直观的看到我的宽高变,背景色变。能懂我的操作法,那接下来我再去做一个操作。同理,这个得换成A。没问题吧?就是反向嘛来走,你这同理,我再一点它肯定是又变回这个了,这个B一点是切换成A的类的。哎,这是解剖里面的东西,就这么点东西,世界委托。然后来我把这个先拿一份,咱们来看一下g two这。
11:01
首先你要知道,在z two里面,官网表示已经要废除了立单的地址。你就是表示想要废除他们,而在我解人里边,相当于leave,这个你就不要去用它了,你只需要知道,因为一点信息上都不能用了。底多应用像,但是建议大家最好是用on这种方式。我们来看一下在live two里面啊,你找一下这个第还有delegate。在世界这一块,大家看到这个地方没有,这边有个地方吗?这边有个delegate吗?我给你点一个,你看一下。哎,这有个标志,这也不知道是个什么东西,什么动物,这画了个锤子是吧,表示的是ED,哎,已经快快要被什么废弃了,你使用谁来代替呢?是不是使用on呢?
12:02
这是它官网现在维护成这样了,我发现这个维护这个官网的程序员就是挺轻松的,应该是。今年刚过完年,这里头像是个小狗的头像,这换了把手枪。哎,他维护可能是怕老板觉得他没活干,然后就把这个换掉了,就换个图片,其实其实这个没有什么意义啊,只是形象的告诉你,我要废弃他。啊好,我们要知道这个,那在A负里面,人家既然已经告诉你了,你不要去用这些方式。这些。那用谁呢?刚刚是不是说到了。统一的用它ARM,我上边的结构一样,哎,结构一样,然后下边我把这个页面打开,切换到移动端。切换到移动端,那切换到移动端的时候,最好是把什么东西改改。这是不是移动,那是touch start了,把这个换一下来,我们来看一下。
13:02
其他的不变。它一点,它按照我们刚刚在解块类里边的想法,我一点击它会发生什么现象。它是不是要加一个B这个类。切换到B类,也就意味着它这个背景色要变色,然后宽高是不是变小。然后大家看啊。现在的问题是。不是按照和杰克瑞刚刚预期的那种效果出来的。他除了触发A的事件,我为什么这标了个B,是让你看到这个回调函数被触发了。注意B触发的事件,这个alert在哪写的?在我B委托的这个。世界这个回调里面吧。现在说明一个问题,这个函数被触发了,这是必然的,要不然这个ler出不来。然后我再去点击一下看着啊。
14:04
这压根儿没动。这是和瑞的区别。那我再去点击一下这个B的,大家看一下。首先上来是不触发B的,这是正常的吧,那你说我再点击呢。出发A的什么看着啊。他又不会触发。这是为什么呢?我在这儿看到这个没有。整个two里面有这个开,而且这个是two在网上被热议的一个事情,就是大家都在关注这个。挺烦的一个事情。为什么会有刚刚的现象,咱们先一一步一步来分析它,我问一下他,我点击一下它出来,这个首先你能说明这个B对应的回调函数是不是触发了。但是我问一下你,我有没有去点击B这个元素啊。那说明我问一下这个函数是谁触发的。
15:02
是A这个类还是B这个类?你想我去刷新一下,B这个那个是不是在这儿呢?A这那个是不是在这,那我点击它的时候,我压根就没有碰到它。但是呢,它对应的回调函数是不是触发了,如果说你自己分析不出来是谁触发了这个回调函数,你应该怎么办?谁触发了他?我们只需要看一个东西。对不对,那我们来看一下。刷新一下手里。谁惩罚的?A触发的,那这样的话就很奇怪了。我明明是点击的class为A的这个内对应的这个电位,但是它是不是把B这个回调函数触发了。而且我在于点击它。
16:00
你看这儿。咱们先把这个删了,我我如果说是点击下面B这个类还和上面是不是不一样。哎,这一组呢,又不会触发A这个,哎,这就有点奇怪了,咱们来分析一下为什么会有这种现象,这个课呢,这些条件我已经给大家列出来了。在人族的世界委托里面,哎,这句话是我举了个例子,他委托的世界。这些元素会依次被放入一个,像数组队列里面的一样。就是这个意思,比如说这有个数字队列,这有个队列先委托的是不是A这个类。接下来后边稍微委托B这个类很有可能在A前面有个一,B后边有个二,这都我们不知道。很有可能有四个元素在进行委托。那么他委托的顺序就是你代码正常解析的顺序。委托好了以后,当你触发的时候,他会去干一些什么事情?
17:03
比如说我触发A这个类,它是不是要去调用回调函数?那这个时候他会从这边往出走。他走的同时,他会回头看一下在我后边有没有符合一些条件的元素,如果说有,我会把他身上绑定那个回调函数也触发掉。但是B如果出去的话,他不会看前面,他只会朝后边看。那满足这些条件到底是哪些条件呢?我们来看一下,下面我给大家列出来。首先,第一条要求委托在同一个副元素身上。我们现在是不是都委委托给box斯,或者说是触发元素的世界范围小于同类性的世界范围?冒泡冒到自身犯这句话可能不太好理解,我来给大家证明事情。
18:03
我这个能不能委托给body?可以吧,Body不也是它的负极元素吗?而这个我不变,还是box看着啊。刷新卡一点。你会发现又和刚才的情况不一样了。那我刚刚仅仅做了操作,是不是把他委托给包了。大家看着啊,我来分析一下。首先这个A我一点击触发,要求你当前的世界是不是要一直冒泡冒到。Body才能出发。而下边这个B绑定的回调函数,我们本身要求他冒泡冒到哪?冒到哪,冒到哪就看你范围在哪,是不是冒泡,冒到box这个盒子上,也就这个是触发事件的这个基点。我点击A,我需要你冒泡冒到body对应的回调时候才能执行。
19:06
而你现在你被绑定的回调函数,你的冒泡能力范围只能放到哪?Box,它没有办法再往上走,走到保底,所以我点击A的时候,不会触发你B的这个回调函数。说白了,你没有资格跟我站到一起。而刚刚我们战士们是仅靠box呀。当你负元素一样的时候,那么它俩冒泡的条件是不是都一样?我要求你冒泡冒的豹子是不是可以处罚?第一条我点击A的时候。点击A的时候好冒泡box,但是我会向后看。有没有其他冒泡的也能冒到这儿的,这是第一枚其中的一个条件,回头一看,哎,B这个元素是不是也能冒泡冒到box?好,他现在已经满足了一个条件,就是我说的第一个条件。
20:03
第二个条件,同一个事件。同一个世界什么意思啊?咱们这什么都反映的是start。我问你,我这能触发吗?可以把。你在移动端也能使用click事件,只不过是click世界相对于touch事件来说,它有一个300毫秒的延迟。这个大家在学移动端的时候应该是讲过。来,我就换了个世界,咱们来看一下,刷新则利。你会发现他也处罚不了。因为他没有达到我的第二个条件,他是同一个世界。这第二个条件再来看第三个条件,我这儿说的是委托关联,什么意思?你看着我A这个类在触发的时候,有没有发现我在最终我是把下边B这个类加到我自己身上了。
21:06
大家看我上面这提前定义了个BOX1这个类。也是是个框框背景色,那这一把我移除掉A类本身的时候,我不加B,我把BOX1加上去。现在跟这个B这个类是不是没有关系了。那咱们再来刷新一下。走。你会发现是不是还是不喝筹码呢?也就是说你最终要操作的类和我下面马上要触发这个类必须关联上,你别看就这一个坑,这个坑想要挖出这个坑还不不是那么简单。这是一个条件,我先把这个换回来,还有一个条件。大家看这绑定的顺序,这个呢,就结合我刚才说的那个,他会向后看的问题。
22:00
也就是说我现在A。触发了以后,我会向后看的,意思是往下去看,因为我代码解析的数据就是从上往下。为什么说是向后看,首先就按现在这个写法来说,大家看一下,我一点击这个,它是会触发B的,但是我们点击这个能触发A的吗?为什么触发不了?B写的时候是不是在A的下面。啊,为了更加证明这个事情,你可以干嘛?我是不是把他俩的数据换了一下,我先给B进行委托,这一版我们来看一下。那根据我刚才所说的,我问一下来,我点击这个确定有什么现象。是会触发B的,还是说直接变小变黄?啊。变小变黄,对的,而我点击这个呢。是变大变红了,还是说触发那个A的回调。
23:04
看到没有?这是因为什么,是因为我是不是把这个病。绑定世界放在它的上面了。这个坑倒是说,其实有的同学可能会发现了这个坑,你这些条件缺一不可。就是说平时我们几乎上是遇不到这些坑的。但是咱们要知道这个事情啊,要知道这个事情,哎,重点我们还是要理解这些东西,这才是重点。然后呢,我再给大家说一个事情。我不知道你们有没有这样一个疑问啊,我还原了还是点击它会触发B的。处完完毕了,你会发现这类中间有过切换,但是根本背景色什么没有动过。来,有的同学可能会有这样的疑惑,盯着这个看啊。我们得把这个往这边,别让alert挡住我,大家看我上来第1DIV对应的class是不是对应的是A呀。
24:04
我一点击它看到啊。虽然说阻塞了,现在我问你我这个class有没有切换过B。切换过了,那我就问你,现在我当前的这个box对应的class是B,也就是意味着我这个class上面的背景色和宽高应该是黄色,那你为什么不给我?渲染成这个呢?阻塞了,那我问你他到底呃,这个重绘重排大家有没有学过。知道吧。什么叫重复?什么叫重台?我问你仇恨和重台,哪个消耗的时间大?哪个耗时长或者工作量大?你要是说不出来,说明你对这两个不理解。
25:01
重绘只是重新渲染,什么时候会重绘呢?比如说你的背景颜色发生了变化,透明度发生了变化,说白了,重绘是意味着你的页面结构没有发生变化,重排是什么意思啊?重新排列,重新排列意味着你之前结构发生了改变,才会导致重排,能懂不?现在有一个问题。就是当我一点击的时候,它这按理来说切换为B的时候,我这个背景颜色和宽框是否发生了改变,我应该是再去开一个线程去干嘛。进行重排吧。首先大家都知道我GS是单线程的。他只代码是不是都在主线值上去执行。当我发现他这要哎。是要切换一个类,我是不是马上再去开一个线程,这个线程专门是用于重重排的吧。
26:04
那我问他GS主线程的执行速度快,还是你开一个它从排的速度快。对,是GS主线程上的代码,执行的速度快。然后我们再来分析一个事情。当我代码执行到这一。这一步的时候也说,我一点击第一个alert,一点击确定它是不是立马加了一个B。但是它紧接着时候是不会触发这个回调函数。那既然它主线成上的,然后触发这的话,进来是不是alert。Ler有一个特点,它会阻塞你的线。对不对,当我阻塞的时候,你所有的活都干不了。也就是意味着,当我们的代码走到这一步的时候,他突然有一个想法,说我得开一个线程去进行出牌。
27:00
对吧,因为这个类不是加到B了吗?那我执行顺序肯定是先加完B再去alert吧。但是GS它主线轴上执行速度远远比你去看一个重排的速度要快得多。那也就是意味着这个时候我想要去开重排的线程,还没有去打开呢。紧接着来到这一步了,他去干嘛了?Aler挂起来阻塞了,阻塞了也就是意味着你根本没有去重排。因为你的现实还没有打开呢。所以我们现在看到的现象是,即使说你这个目前看到的class为B,但是我的背景颜色和宽高是不是还是A的那个样式啊?那然后我再一点击确定,他说他去干了,是不是这样,是不是又换回来诶。我问你,他最后有没有去重新。绘制或者重新渲染。
28:03
有没有?其实有。为什么我说他有,是因为你看啊,我在点击这个确定之前,我这很明显记录的我class是不是为B。但是你一点击确定它是不是又开了一个,马上又切换为A,首先你不同的class是不是对应不同的样式。那我一真是哦,由B变为A,我的样式变了,咔,立马再去。重新渲染绘制。这个时候可能有的同学说,为什么我就看不到它的变化了?重重排,虽然说重回重排比GS的执行慢,但是远远比你的肉眼速度要快得多。你不要以为,他慢慢的说,告诉你,我给你画一个轮廓,哎,渲染个背景色。这个速度还是很快的。哎,这些东西呢,希望大家最好是能以后能自己分析出来。虽然说我看到这个加上去了,我得知道它为什么这背景色没有切换。
29:00
大家能懂吗?嗯,行。啊,当然了,这个不是重点啊,重点是杰克ary,这我再说一个事情。啊,你开发的时候很有可能几的很多方法我们都去使用,但是面试的时候肯定不会问大家,哎,Append这个方法是干嘛呢,怎么去用。放心吧,不会问你这个的。甚至不会问你这些外的问题,问拓展是问什么,问世界委托还有加斯这些。的重点。或者比较深的东西。所以说这些东西希望大家,哎,一定要把它牢牢掌握了,我呢先把这个。
我来说两句