117.尚硅谷_JS基础_事件的传播

这再说一个事件的一个知识啊，这个东西呢，我们就了解一下啊，了解一下这么一个东西零三，我们叫做一个这个事件的一个这个传播啊，适应的传播，或者要适应一个传播的一个流程，我们来看一下啊，写这么一个东西，来一个div，来一个井号BOX1，然后井号BOX2，然后div，井号box，我现在创建了三个div，他们关系什么呀？BOX1是最大的，然后二，然后是三祖先元素，负元素，还有什么呀，子元素对吧？然后我们来设置一下它这个钥匙井号井号BOX1，来一个Y来一个这个二来一个300吧，300个像素，然后hat呢也来一个300个像素，Background color来一个这个yellow green，然后呢，来一个井号BOX2 box2呢，Y来一个这个200 200像素。

然后呢，Hat来一个200个像素，然后呢，Background color，我们来一个这个yellow吧，然后再来一个这个BOX3，那这个效果应该我这写，你们赶紧想象到了一个大盒子里边套着两个小盒子，对吧？诶一个套一层，一个套一层，那么一个效果来个这个150个像素呢，也来个150个像素，然后background color background color来一个这个sky blue，诶这么一个颜色。打开诶是这么一个效果呀，这个呢是我们外边是BOX1，然后这是BOX2，这个是我们这个BOX3啊，从外到里依次是这个123啊123，然后我们来看什么叫视线的传播啊，来写一个什么呢？一个script的标签在这来一个window window点一个lo等于一个这个function等于function，我们来干嘛呢？诶分别为我们这个三个div绑定我们这个单击响应函数，直接来一个啊Y一个BOX1等于document，点一个guide and100id box1是我们最外外边那个组线元素，然后复制一下啊，然后是我们BOX2BOX3ID都改过来，这是二，这是三，三个盒子是不是都有了呀？接下来绑定想应函数，咱们这样啊，我把我刚才写的这个半的给它整过来，CTRLC。

直接粘到我们这个script里CTRLV，诶我们这个半，然后呢，我直接来一什么呢？诶半来一个这个BOX1，然后逗号来一个click，逗号来一个function，诶function呢，我这来一个这个alert alert我是BOX1的响应函数，这是一个，然后呢，我要绑定三个二三，这是我们BOX2，这是BOX2，这是BOX3，这是BOX3，现在BOX123我们是不是都绑定这个小应函数了，诶小函数了这块我们看一下效果，我一保存这一刷新，我一点它是不BOS1的呀，诶我一点里边那个什么呀，BOXS2了，然后呢是BOS1的呀，为什么呀，二号了吧，诶从BOXS2是不传到豹S1了，然后点里边三，我1.3出来了吧，然后一点。

BOXS2再一点是BOXS1啊，诶那这块就是我们事件的一个传播，是从哪往哪传的呀，诶是不是从里往外传的呀，诶叫由内而外的是吧？诶由内而外的啊，那这里边我们来说一下，那其实要要是光这样的，其实咱们这块就没必要说了，那这里边我们要说一下，实际上它还会有一个东西，我们说除了冒泡，我还有东西叫做一个捕获，我们来说一下这是什么东西啊，那我们来说事件的这个传播。那我们说关于什么呢？关于我们这个事件的这个传播，我们的这个什么呀，我们有一个公司叫做网警，网景公司和谁呢？和我们这个微软公司，它有什么呢？有不同的这个理解，或者说有不同的这个设计啊，有不同的设计，那这里边网景公司当然现在已经已经倒闭了，是吧，但是那会儿呢，他还比较有话语权，所以我们要说一下这两个公司的一个不同的理解，我们先说谁呢？先说我们这个微软公司，诶微软公司认为什么呢？微软公司认为我们这个事件应该是什么呢？应该是什么呀，由内向外传播的啊，由内向外传播的也就是什么呢？也就是我们这个事件应该干嘛呢？哎，事件。

当我们这个事件触发时，应该什么呢？应该先触发我们这个什么呀子，诶叫做诶当前元素上的这个什么呀，哎想一函数当前元素上这个事件，然后什么呢？然后再。向我们什么呀，当前元素这个祖先元素上干嘛呀，传播啊，传播这个东西和我们现在看到效果是一样的，先点谁啊，我一点它是不是先触发它的事件啊，先触发BOX1的，然后往上传，传给谁啊，传给BOX2，再往上传传给谁啊BOX12，所以微软公司认为什么呢？应该是这样的，从外从内向外传的，也就是什么呀，也就是说我也就是说我们这个事件应该在我们这个冒泡阶段是执行啊，哎，应该在冒泡阶段执行啊，所以这里边我们来画一个小图来体现一下我们的关系啊，什么意思，还是来说一下，我们画一个什么图呢？就画几个方块，简单一点，外边一大方块，然后中间一个方块，再来一个方块，那假设呢，这是三个div，当我触发事件的时候，我可能干嘛呢？我点的是这个中间这个元素吧，那这事件应该怎么传呀，它的方向应该什么呀，是往外传呀，哎，从里向外传，那这。

这个我们叫什么呢？叫做一个事件的一个冒泡，事件的这个冒泡啊冒泡，然后接着再来说，那接下来说我们这什么呢？说我们这个倒闭了的这个网景公司，网景公司认为什么呢？网景公司认为啊事件应该是什么呢？应该是由。

诶，由外向内传播的啊，由外向内传播的也就什么呢？也就是我们这个当事件触发时应该什么呢？应该先触发它，哎我们这什么呀，哎触发我们当前元素的什么呀，最外层的祖先元素的什么呀，事件啊先触发最外层的祖先元素事件什么意思，我一点这是不是BOX3啊，我点完它先触发谁呀？先触发bos啊一，然后再触发BOX2，然后再触发BOX3，它是什么呀？从外往里传吧，哎从外往里传的，所以注意啊，网警公司认为什么呢？事件是由外向内传播的，也就是说当事件出发时，应该先出发元素最外层的祖先元素的事件，然后呢，哎，然后再什么呢？哎在这个哎向内传播给谁呀，传播给一个后。

口袋元素啊，后代元素什么意思，还是拿这个图，网点公司认为什么呀，我这一点中间的这个他应该干嘛呀，事件应该是从外往里来，先发谁呢？先触发最外边这个元素事件，然后再触发谁呀，刺一个，然后是不是再触触发自己的呀，哎，自己的，那这个阶段我们叫什么呢？叫做一个捕获阶段，事件的一个捕获阶段，哎，捕获阶段，那我们说了，你想想王鼎的东西，它这设计合不合理啊。这东西这会感觉很奇怪，为什么就很奇怪呢？那应该什么效果呀，我一点BOX3咔一点出来一什么呀，BOX1这是不是就很奇怪了呀？诶所以它这设计呢，其实它不太合理啊，不太合理，那我们说了，但是这事最终谁说了算呀。

谁说了算呀，诶最后是W3C说了算啊，W3C说了算，当然W3C怎么决定呢？诶我们来说一下，你猜的呀，他怎么决定的呀？诶他采取了一个中立的方案嘛呢，他不得罪人啊，我们W3C干嘛呢？他综合了什么呀？诶两个公司的方案，哎综合了两个公司的这个方案将什么呢？诶将我们这个事件分成了什么呢？分成了这个三个阶段啊将我们事件的这个传播分成了三个阶段，第一个阶段我们叫什么呢？第一个阶段我们叫做一个事件的一个叫做一个捕获阶段，那在捕获阶段时呢？诶在捕获阶段时，在捕获阶段时由什么呢？诶由我们这个，从我们这个祖先元素，诶最外层的这个祖先。

元素像什么呢？像我们这个目标元素进行什么呢？进行我们这个事件的捕获啊，事件的捕获，但是但是什么呢？但是默认此时不会触发事件，什么意思，你这一点它是不是最里边啊，先干嘛呢？先从外边对事件进行一层一层的捕获，从哪开始？最外层，最外层应该是谁？诶document啊，Document最外层是从document，我们W3默认设计是从document开始捕获的，但是大部分浏览器都设计成呢，从window开始啊，从window开始，从window开始一层一层的往里捕获，捕获到哪为止是你点那个呀，诶你点的那个，所以第二个阶段叫什么呢？叫做我们这个目标阶段。叫做什么呢？哎，目标阶段叫什么呀？诶，也就是说我们这个事件捕获到了什么呢？我们这个目标元素啊，目标元素目标阶段跟哪，目标阶段是不是正好跟我这个。

在这儿啊，哎，这是我们这个目标阶段，你什么意思呀，一点它先从最外层那个window往里进行捕获捕获捕获捕货一直捕获到哪啊，目标阶段在这儿干嘛了，就停止捕货了，但是注意捕货过程当中会不会触发事件，不会，它只是捕货来看看谁有，但是呢，不会触发，那注意了，我现在目标跟这儿是补获到这儿，如果目目标阶段在这儿呢，是不是只到这儿啊，你点谁就在哪为止啊，到为止啊目标阶段，然后目标阶段完事以后干嘛了呢？第三阶段我们叫什么呀？诶冒泡阶段啊，冒泡阶段什么呢？我们这个事件从什么呢？从，诶咱们实际上事件捕获到目标元素，我们先说这个目标进啊事件捕获到目标元素，也就是说我捕获是不是已经结束了呀，结束了干嘛呢？诶捕获结束，也就是说已经到目标了，开始什么呢？诶开始在我们这个目标元素上干嘛呢？执行我们这个什么呀，执行我们这个。

事件或者叫触发我们什么呀？触发我们这个事件什么意思，往里补货，一层一层补货补货，补货补货一倒到哪了目标了，我开始干嘛呀，开始执行啊开始执行一执行目标阶段，我是不是从这开始执行的呀，执行完了进入到第三阶段干嘛呢？我们这个冒泡阶段干嘛呢？事件从我们这个目标元素向什么呢？向它的这个什么呀，祖先元素传递啊传递一直什么呢？诶分别依次。哎，触发我们这个祖先元素上的这个什么呀，事件啊，依次触发我们祖先的事件，所以注意我们事件其实默认是在我们这个目标阶段执行的，但是注意了，目标阶段其实它干嘛呀，它属于一个什么呀，中间的，诶你可以说它也属于什么呀，补货也可以说它也属于什么呀，冒泡它属于一个中间的阶段啊，它主要是处于一个中间的位置，所以这块呢，诶我们一般都认为什么呀，可以说是在目标阶段开始执行的，那么一般都是什么呀？是不是都是在冒泡时往上走的呀？诶冒泡时往上走的啊，所以注意默认都是在我们这个，诶这开始执行的啊，这开始执行的，那这块我们带来一个问题，那补货阶段，那现在我干嘛呢？那可能我有一个需求，我希望什么呀。

我希望在。补货卷就执行什么意思呀？我是不是希望你在这儿往里走的时候就开始执行啊，而不是在这开始执行，那怎么办呢？诶你要注意了，我们说我这个B里边这个it，你问listener是不是有一个for呀，哎，For那我们就来说一下，如果什么呢？如果希望在我们这个补货阶段就干嘛呢？就执行我们这个，诶就触发我们这个事件可以什么呢？可以将我们个A的invent listener叫什么呢的第三个，哎参数设置为什么呢？设置为true，诶设置为处，那看我都统新改一下了，直接把它改成什么呢？改成一个处，改成处什么意思，在捕货阶段执行事件，那这个看你会发现很奇怪了啊来我这一刷新，我点这是谁呀，这是我们这个。

这时候B3吧，诶我这一点走你谁出来了BOX1，再一点BOX2，最后是不是才BOX3啊，这种感觉就会什么呀，很奇怪啊，不符合我们这么一个这么一个思路，所以这块注意一般情况下我们用不用啊不用啊一般情况下，哎，我们不会希望在我们这个补货阶段干嘛呢，执行我们这个事件啊出发事件，所以呢，所以这个参数一般都是什么呀，都是false啊，一般都是false啊很少去传出啊，很少传出，诶那可能有同学说了，诶老师，那我这块这是我们说正常浏览器是吧，如果IE8我想捕货怎么办呀？诶那注意了，我们所说这个适用于什么呢？IE9及以上的浏览器，在IE8及以下的浏览器中呢，它没有这玩意儿啊，IE8及以下的这个浏览器中。

他干嘛呢？他没有补货阶段，他压根就不会补货，所以IE巴里你有没有就谈不上在捕货阶段开始执行了，他只有这样，只有这个冒泡啊，只有这个冒泡啊好，那这个呢，是我们说的一个事件的一个传播，这个呢，其实呢，主要是了解一下，知道它是怎么回事，它要分了这么三个阶段啊，了解一下这个流程就OK了啊，我们这儿呢停一下。