00:00
这两种方式都会了是吧?来继续。016。呃。关于代码的执行顺序。这个我重命名一下啊,常用事件以及什么注册事件的两种方式。这个啊。下面是关于JS代码执行顺序,大家注意看。关于JS代码的执行顺序,比如说我在这里有个input type类型是button,然后value这一块呢是,然后呢是ID加一个TN,完事加来写script,先type类型加script,然后在这个位置上我们写document.get element by ID ID这一块我们加上BTN之后呢,点on click on click之后呢,我们等于function写上是吧,然后这个function呢,这块我们直接就alert,就假如说写一个什么呀,Hello GS,好,大家想这个程序能不能执行啊?
01:26
再思考一下。细心的同学一般一般会会发现问题。你看我刚才写的时候,我是故意把按钮写到上面,再写的这个脚本。没注册。对吧。我现在这个程序变成什么风格了,诶我说没说过,之前我说没说过这个的标签开始到标签结束,里边的代码会在什么时候执行。
02:09
页面打开的时候,会自上而下的顺序依次中行执行吧。他执行这块代码的时候,这个值这个这个加载到浏览器里边了吗?这个ID等于BTN的这个节点,或者是这个元素在网页的内存里边已经加载了吗?还没有,那你这一行代码是不是就执行失败,什么意思?Document get by ID,这个ID这个东西在内存里面不存在,它怎么去获取这个元素呢?分成两步,是不是就是刚才我们写的第一步是干啥?第一步是干啥根据ID获取什么节点对象吧,第二步是给什么给节点对象绑定什么事件。对吧,好。那你这一步就拿到的是空吧,这个ID不存在吧,执行一下的。
03:16
他是。点。没用,没绑上,没绑上的原因是因为拿回的是返回浪吧。是不是?为什么是now?因为代码执行到此处的时候,ID等于BTN的元素还没有加载到内存,怎么解决这个问题?奥。
04:00
是太聪明了啊,把个代码放后边。是不是给他放后边就行了,但是这样以后我们天天得记得这个事,我们这个代码得放到什么什么后边这个不行,我们不能靠这种方式。对吧,怎么办?我们刚刚学过一个事件,还记得吗?有一个事件叫做整个浏览器当中所有的东西全部加载完毕之后才发生。漏吧,是不是学个事件叫漏漏事件,在这里可以加一个什么啊漏。懂吧。漏的事件什么时候发生?
05:00
页面全部元素加载完毕之后才会发生,也就是这里的代码什么时候执行。全部加载完毕吧,好,那你把这个代码给我改改怎么改,是不是应该在这加一个函数。就ready吧,行吧,什么意思啊,准备好我们把这个代码怎么办放这。行不行,然后把这个函数放这。你看行吗?这个函数什么时候调用,这个事件发生之后,这个函数才调用,这个事件什么时候发生,页面全部加载完毕之后,这个函数才这个这个事件才会发生,注意听啊,这块代码非常重要,这个load表示页面加载完毕之后才会发生,页面加载完毕之后才会执行这个函数,而这个函数在执行的时候,也就是这里边代码在执行的时候。
06:03
我们整个页面的元素都已经怎么着加载完了。您直接暴露到写这个里边,和把这段代码放到一个函数里边,把这个函数放到onload的后面是不一样的啊。放到这儿什么时候执行。页面打开的时候,走到这儿就执行了,你把这个代码放到ready函数里边,Ready函数什么时候执行,这个事件发生之后,这个函数才执行,这个事件什么时候发生,页面加载完毕之后,这个事件才会发生,所以整个页面所有的元素全部加载完之后,才会发生这个事件,这个事件一发生,再去执行这个函数,而这个函数一执行,这个ID就已经存在了。再打开。对吧,好,我们把这个代码变个形。还能继续变形。
07:03
这个onload后边是不是有个函数啊,来注意看啊。017还是JS代码的执行顺序变了,各位,我幺六这个代码ctrl a ctrl c复制CTRLV粘贴贴过来之后,我想给大家说的是。这个地方不用写了。有吗?这个地方不写的话,这个函数是不是执行不了,这个函数想执行可以这样做,window.onload。
08:02
看看能不能看懂啊。window.on原先不是在body后面写了个onload吗?这个onload不写了的话,那window就可以点onload后面绑一个函数,这个函数什么时候执行,这个事件发生之后才执行。同学有点绕啊,这个这是漏的是什么事件,是不是页面加加载完毕之后的事件,也就页面加载完毕之后,是不是这个函数才会执行。能理解吗?变形了就这不行,漏的了,就跟你当初音input的标签不行click一样的,这个能能不能转过来玩,这个地方不是天天写on click吗?以后我们这就不再写这个on click了吗?你在这个位置不是有一个body叫onload吗?Onload这块我们以后就不写onload了,我们怎么写window.onload11个意思啊,一个意思,那这个window.load那ready这个函数的话,那个函数就别写了呗,这个代码直接就方式就完事了呗。
09:47
这里面有几个回调函数。俩一个这个函数是回调函数,这个地方也是个回调函数,那你告诉我这个回调最外边的这个回调函数在什么时候执行,这个回调函数在什么时候执行,页面加载完毕之后,这个回调函数执行,那你告诉我这个函数在什么时候执行,鼠标单击事件发生之后,这个回调函数执行。
10:19
两个回调函数格。这个回调函数。在这个事件发生之后,这个回调函数在这个事件发生之后才会执行。但是我问大家一个问题啊,在页面打开的时候,他们做了什么事?页面打开的时候只是把函数注册上去。对吧。这个只是注册上去。而且这个注册是什么时候注册的。这个函数是什么时候注册的,这个事件发生之后,这段代码在执行的时候,这段代码在执行的时候,是不是页面加载完毕啊,页面加载完毕之后。
11:08
这个函数才会执行,所以这个函数是在什么时候注册上去的,是在页面加载完毕之后注册上去。但是你这个函数是在什么时候注册上去,一面打开的时候注册上去。假如说这个回调函数啊,这个回调函数叫做A,假如说这个回调函数叫做B啊,这个回数叫做B啊,来我说一下啊。页面怎么着,加载的过程中。将A函数注册给了漏的事件。
12:07
页面加载完毕之后,加载完毕之后load事件发生了。此时执行什么?此时执行回调函数A。A在做负值运算的时候,什么时候负的值?页面打开的时候负的值?但是你这个A函数的执行,必须等这个事件发生之后,这个函数才能执行。所以页面加载完毕之后,我说了load的事件发生了,此时执行的是不是回调函数A对吧?好,再问大家,回调函数A执行的过程中把B函数注册给了谁?ID等于BTN的click事件。
13:24
你大括号里面代码是不是会一行一行代码执行,你执行的过程当中是不是等于把B函数注册上去,接下来最后是什么?当。ID等于BTN的节点,发生事件之后,B函数被调用并执行吧。这个代码虽然最后这样写,但是我告诉大家原理和我们之前讲的这些原理都是一样的。
14:06
你再看一下这个代码,各位啊。这个ready写到这是啥意思?就是onlo的事件发生之后,Load的事件发生之后是不是才能执行它,Load的事件的发生是什么意思?是不是整个页面全部加载完毕之后,这个事件才能发生,页面全部加载完毕才会执行它,那你页面全部加载完毕再去执行这个函数的话,那那这个ID有没有啊,有,所以这个代码在执行的时候当中点get by BYD就可以拿到这个元素给它绑上,给它绑上去之后呢,这个函数并不会执行,必须等着这个,可这个事件发生之后,这个函数才会执行,听懂了吧,所以这个程序一变形就变成什么了,这个代码都没动啊,都没动。只是把这个位置的onload怎么着去掉了,换到了这个位置上,那如果你要是把这个程序拆解一下,怎么拆,拆解一下来怎么拆,再拆回去,这是个什么函数?
15:08
对吧,那它既然是个函数,这个函数里面的代码是不是就是它。Window onload ready。理解理解就行。Hello PS,看这种方式行不行?没运行吗,这是。可以吧?以后我们都用这种方式了,各位啊。Window onload后边有个回调函数。然后当时的get BYD,然后点后面有个回调函数。
16:02
都给他。这是关于我们GS代码的一个执行顺序。各位。这个非常重要。千万要注意,这个代码是有问题的。因为暴露在script标签当中的document.get by ID这个ID啊,它不存在,它这个代码执行的时候仿的是空,因为你下边这个还没加载,所以我们就只能变形变形,最后变成这个模样。
我来说两句