113.尚硅谷_JS基础_事件的冒泡

接着来说啊，再说一个这个一个知识啊，也是呢，比较重要，比较简单的一个叫什么呢？叫做一个冒泡啊，就一个冒泡，冒泡什么玩意儿呢？哎，咱们先啊写这一东西啊，在这里边呢，我先写一个div div来个井号，来一个BOSS1，然后呢，在这再写一个这个败SPA里边写什么呢？我是一个败败，然后呢，这写我是这个BOX1啊我是BOX1，然后呢，我们来给它设置一下这个样式，死就死了，带有标签，我们来写什么呢？叫做井号一个BOX1，井号BOX1，我来一个这个Y 100个像素，Hat呢，也来个100个像素，然后background color，来个这个yellow green，让它大一点吧，来一个二百二百保存，然后在我们火狐里先运行一下，哎，这一。

哥，这是我这个BOSS1对吧，然后呢，我这再整一个span的样式，直接来一什么呢，给他也来一个ID吧，ID叫一个这个SSE，直接来一个这个井号SSES1呢，别的就不设置了，就来一个color，来一个yellow，一保存一刷新，这黄的是SPA对吧，绿的是我们这个div，诶div再往后div后边谁啊body吧，诶div后边是body啊是body，那这样咱们这么来吧，Body也来，来一个你body设设置背景都看着咱们就不给body设置了，后边呢，都是这个body啊或边都是body来，那现在来干什么事儿呢？在这儿写点东西啊，来一个这个window。点一个刚lo等于一个这个function等于function呢，在这我来写一个先来干嘛呢？哎，我来为我们这个S1 S1也就是我们这个SPA是吧？诶来干嘛呢？绑定一个这个单机想要函数直接把一个S1等于一个do平的点一个get an摆ID来一个S1，现在要来什么呢？S1.1个uncle Le等于一个function等于function，我是直接来一个alert alert什么呢？我是SPA的这个单击响应函数啊，我是SPA的单击小函数，现在我这一保存，咱们来看效果，一刷新SPA是不是这黄色的呀，你点绿的点这儿都没关系，没用，只能点谁呀，黄色的我给你点。

是不，我是SPA登甲是吧，就触发了啊，就出发了，这是给死SPA绑定的，然后接下来呢，我们再来一个啊直接复制了，我说都一样的，我为谁呢？为我这个，诶BOX1 box1这块ID呢，改成这个BOX1这个呢也改成BOX1，这也是box e，然后呢，这时改成什么呀？我是这个div的单基性函数，Div还是div是不是这绿块啊，我一点绿块是不是就出发呀？诶点绿块就出发，然后接下来再干嘛呢？再干一件事，为我们这个包底来绑定一个这个单击响应函数，直接document，点一个body，点一个on click等于一个function，等于function呢，还是我就直接来一个alert alert一个什么呢？哎，我是这个body的这个单击响应。

函数这不是又一个呀，好，那现在我这一保存啊，咱们来看效果，现在包里在哪呢？这是不是都是玻璃啊，哎，我这一点是不是就触发了呀，哎，就触发了包里的这个单价是吧？那现在来看我分别给死SPA，给div还有body是不是都绑定单价是吧？那你要注意了，现在我这个SPA和我这个div还有body他们三个什么关系。

Span是div的子元素，诶div又是什么呀？玻离子元素，他们是不是祖先后代的关系啊，哎，祖先后代的关系啊，来看一个效果啊，现在看着我一刷新，我点黄色的是不是点死SPA呢？诶，我这一点来走你，诶我是死SPA的，单击小函数是不是出发了，好看着啊，我来点一个确定走你。哎呦，我是div的单机项，你发现div的那是不是也触发了呀？哎，我再一确定走你我是包底的单击项函数，你发现什么了？我点的是谁呀，SPA吧，但是却发现什么呢？Div SPA，还有包底的三个的单击函响应函数是不是都被我触发了呀？哎，都被我发了，那这个叫什么呢？这个叫做一个事件的一个什么呀？冒泡叫做一个事件的一个冒泡，我们叫一什么呢？叫做一个BU BB Le叫做一个bubble啊bubble叫做一个事件的一个冒泡，什么叫事件冒泡？总结一下，我们说，诶所谓的这个冒泡指的什么呢？指的就是我们这个事件的这个向上。

传导啊，向上传导当什么呢？当我们这个后代元素上的一个什么呀事件诶被触发时啊，当我们后代上的一个元一个事件被触发时，什么呢？其祖先元素的这个什么呀，相同事件干嘛呢？诶也会被触罚啊，也会不会触罚，他就前提什么呀，他得是什么呀？哎，你点击这个死SPA谁呀，他会往往哪冒呀？往div还会往什么呀，往body璃上冒，它会向组先上什么，你点死SPA，我是不是触发这个死SPA单价函数，哎，同时也会触发谁呀div的，为什么？因为div是不是死SPA的这个负元素啊，同时也会触发这呢触发我们这个body的，因为body是不是这个紫SPA的这个组线元素啊，哎，它会一级一级往上去传啊，一级一级往上传，这就像什么呢？举一个例子啊，举个例子，我的我小时候呢，在我们这个，在我们村里是吧，大概呢。

大概四五岁的样子啊，四五岁的样子，那个时候就是情窦初开是吧，叫啊情窦初开啊，就是小时候就特别单纯那种是吧，然后呢，我们村一个小女孩是吧，小女孩我就特别特别喜欢那个小女孩，就是就是单纯的喜欢是吧，这真心的那种喜欢，没有任何这种混乱思想是吧，那时候也不可能有是吧，这时候不可能有，那有一天呢，我就没忍住，我就亲了那个小孩，亲了个小女孩一下，这就是就是亲了一下是吧，然后那小女孩挺生气是吧，咔咔咔给我揍了一顿，哎，给我揍了一顿，那我想着揍一顿揍一顿，反正我也亲了是吧，还是亲了，我想着我我以为啊这事就完了，然后呢，他回家呢，炸着他爸爸了，他爸爸一听呢，那玩意儿。

疯了一样是吧？又上我们家找着我，就把我也给打了一顿，诶，就好像我把他爸爸也给亲了一样，诶，这是不是就冒泡了呀？那我以为这事到这儿也就行了，他打两顿还不行是吧？晚上跟家吃饭的时候，他爸爸跟饭桌子上把这事跟他爷爷说了是吧？他爷爷饭都没吃完是吧？又找着我又打了一顿，又好像我把他爷爷也给亲了一样，亲了一下，我这挨了什么呀，三顿揍，这是不是就是属于什么呀？冒泡啊，哎，从孙子传到哎，从这个孩子传到爸爸，从爸爸又传到爷爷，是不是一层一层的去往上传呀？哎，一层一层往上传啊，同样我们这块也是当我去触发死SPA的单机想函数的时候，同时干嘛呀，是不是事件冒泡到这个div啊，也触发这个div的单机讲函数，那同时div触发完了又冒泡，冒泡泡是谁呀？Body是不是触发了这个body的单项函数，一层一层往上冒，Body上面还有谁呀？

是不是还有A啊，如果HTM2我们也绑定单体函数，它也会触发谁啊，它的再往上冒冒哪啊，诶再往上就是什么呀，Document啊，Document到document基本就到头了啊，就到头了，所以这块它是一层一层往上卷，诶冒啊往上就传的，那现在我们来看，那刚才我点的是SPA会触发什么呀？SPA的div的，还有body的，如果我点div呢。会不会触发子弹呢？诶不会我点div div的还有谁呀，还有body的，注意是往上传，不会什么呀，不会往下传，你要直接点body是不是就他一他自己的了，诶他自己的了啊，而且还是什么呀，你要注意是相同事件，也就说你触发的这块，你你是触发的uncle可利格，你触发组先元素也是什么呀，也是安可利格一定是什么呀，相同事件啊相同事件好，那这就是我们说这个冒泡，那我们说这冒泡好不好，哎从我这个我小时候这事来角度讲呢，这事儿不好是吧？诶这是不好，但是从咱们这什么呀，咱们这个开发角度讲呢，其实呢，大部分情况下冒泡是有用的啊，冒泡有用的我们说什么呢？诶在我们这个开发中，诶大部分情况，我们这个冒泡都是什么呢？冒泡都是这个，诶有用的啊，都是非常有用的，比如说举个例子，什么例子呢，来看这。

我们刚才这个练习CTRL运行，是不是可以让我们这个div跟随鼠标移动啊，假设啊，假设有这么一个情况，在这个页面里呢，我有一个这个什么呢？我有一个还有一个div div直接给它设置一个样式，Vis呢来一个这个500个像素，Has呢也来一个500个像素，然后background color background color来一个这个，诶来一个这个井号div保存，我是不是又设置这么一个div啊，现在我一刷新啊，咱们来看这，诶这是不是有一个div啊，那现在我问你了，当我这个鼠标移入到这个div的时候，我这个红方块它会不会进去，会不会进去，哎，来我移。

是不是跟着一块儿进去了，要注意了，我这个事件我是绑定给谁的。我是绑定给document的吧，哎，绑定给document，那我现在问你，我现在是在document里边移动的吗？不算document，这是我新创建这个div吧，我是在这个里边移动的，所以并没有在do这移动，那所以你想想，如果没有冒泡的话，我在这儿移动，它会传给do吗？不会吧，哎，如果没有冒泡啊，如果没有冒泡，那我们说了，那现在为什么能移动啊，就是因为我在这儿移动，它是不是冒泡给我们那个document了，冒泡给document就触发了什么呀，触发了我们那个document那个事件吧，诶所以才可以跟着什么呀，跟着移动，如果没有冒泡这个东西就干嘛了，就麻烦去了，待会儿我们给你演示一下啊，会给你演示一下，所以这个冒泡一定注意，大部分情况下，冒泡对于我们来说都是什么呀，都是有益的啊，都是有益的，但是有一些情况冒泡是干嘛的。

是没用的，就像我刚才演示这个问题，这个冒泡呢，它就是什么呀，是不是就没必要的了，哎，我就希望触发一个，我不希望触发那两个，那这块我们就需要干嘛呢，我们就需要干嘛呀。是不是取消冒泡，诶取消冒泡啊，我们说如果什么呢？如果不希望我们这个事件，诶如果不希望发生我们这个事件，冒泡可以干嘛呢？诶可以通过我们这个事件对象来干嘛呢？诶来取消冒泡啊，来取消冒泡，那这东西怎么取啊，怎么取消呢？其实很简单是吧，拿我们刚才这个例子取，其实亲完了以后干嘛呢？咱们跟他商量好了是吧，咱俩亲完了就完了，你别往上。你就别告状了，是不是行了呀，哎，这块也是一样，我点完你呢，你就别往上传了就得了，那这块怎么整呢？那注意了用谁呀，用事件对象，那你要用事件对象，你是不是得先得找到事件对象啊，诶来一个evet，直接来一个evet，等于一个evep，或者是一个window点一个evnt，诶是不是来这么一个呀？诶然后我们在这来说叫什么呢？叫做取消冒泡，怎么取消直接event有个属性叫什么呢？叫做cancel cancel什么意思呀？取消cancel bubble叫取消冒泡，等于什么呢？等于处啊等于处我们可以什么呢？可以将我们这个什么呀？诶事件对象的这个cancel bubble干嘛呢？诶设置为处即可什么呢？即可取消冒泡，注意了，这个属性你要看它这它的描述呢，诶，咱们这来看一。

Cancel bubble，他这个描述他写的什么呀？只有IE是绿色蓝色的呀，诶只有IE是蓝色，所以这个属性呢，本身是什么呢？是IE的属性，由于这个属性呢，诶非常好，所以干嘛呢，所有浏览器它都支持了，现在包括re们，包括我们这个火狐它都支持这个属性了，所以可以放心的用，没有兼容性问题啊，没有兼容性问题，我这一保存咱们这个看啊看着我现在是不是给在死SPA这个单击函数里边是不是取消冒泡了，好，我这点一下死SPA这一点走你SPA出发了吧，确定是不是还有吗？

没有了，因为干嘛了，到这儿我这个冒泡就已经取消了啊，就已经取消了，那再来看我点谁呢？Div div我是不是点了，然后一确定走你还了呀，哎，我是不是只取消的，我是没取消啊，你要想取消的，你把这套呢，还还得来一遍啊，还得来一遍，把这东西给它粘过来，这块一保存，一刷新再一遍。是不是就没事了，哎，就没事了啊，这也是我们说这个取消冒泡，但是注意了，大部分情况下，我们这个冒泡都是什么呀，都是有用的啊，都是有用的，那好，那回到我们刚才的练习，我们已经知道如何取消冒泡了，那现在干嘛呢？诶那我们回到这个练习，这个练习干嘛呢？现在我们说了，现在我在这儿可以移动，为什么可以移动，因为它这块是不是可以冒泡啊，诶那看看着啊，我把这个冒泡我给他取消了，你看是一个什么效果。

这个元素呢，给它来一个ID吧，ID等于个这个box，应该我复制一下合适的啊，先这么写吧，来一个这个BOX2，在这呢，我来获取一下这个box，直接来一个Y，一个这个BOX2等于一个doin的点一个get is100id，来一个这个BOX2，然后呢，直接box2.1个目，等于一个function，我这东西不干别的，就是为了来给它取消冒泡，然后呢，来一个等于一个或者是一个window点。然后呢，来一个这个event，点一个cancel bubble，等于一个出一保存，咱们来看啊，现在注意了，现在当我移动到这上面的时候，它还有没有冒泡了，就不冒泡了，不冒泡也就说我在这移动会不会冒到。

不会，诶不会吗？Do，也就是说do的那个响应函数压根就不会触发，那我们来看什么效果。是不是进不去了呀，因为在这移动的时候，它没有触发那个什么呀，Document那个事件，诶它这个你一到这边上。是不是就给你卡住了，哎，就给你卡住了啊，是这么一个效果，所以注意，那你想想这如果没有冒泡，我们这功能是不是还挺可怕的呀，哎，所以注意啊，冒泡大部分情况对我们来说是有益的，诶小部情况我们需要给它取消掉啊，需要给它取消掉，好那这一块呢，是我们说的一个冒泡说听下。