冒泡事件

wanghui 发布于2019-08-23 10:46 / 399人阅读

摘要：在上阻止冒泡事件，使得无论在点击按钮还是显现出来的浮层都不会使浮层消失。其实，除了使用阻止冒泡的方式阻止事件的传播，还可以使用方法，使需要绑定给页面的函数在冒泡询问完成后再绑定。

举一个小例子，说明下对冒泡的理解

准备工作与目的

首先，先写html，就是一个按钮+一个浮层，再加上点css


    
        
        
            gone with the wind

然后，写点js实现功能：点击ClickMe按钮弹出gone with the wind浮层，点击别的地方隐藏浮层

不难理解，点击$("#clickme")把$("#fuceng") show()出来，点击文档$(document)把$("#fuceng") hide()掉

问题的产生

在单击$("#clickme")的时候并没有显示$("#fuceng")，为什么？？？见下图

问题解释：遇到事件时，先按照黑色箭头方向从祖先问到自己：捕捉事件，然后再按照红色箭头从自己问到祖先：冒泡事件。问的内容是：某某元素被xxx（事件名）了，你是否有函数要操作？

本例中，没有捕捉阶段，直接到冒泡阶段。$("#clickme")被点击后，操作了自己的函数：$("#fuceng").show();。那为什么$("#fuceng")不显示呢？？？因为冒泡还没结束，问过$("#clickme")后又问到了它的祖先$(document)：你的一个子孙被点击了，你有函数要操作吗？有！！！然后操作了它的函数$("#fuceng").hide();，所以又被隐藏了。。。

为了显示过程，在两个函数里分别加上console.log，结果见下图。
说明，先执行了$("#clickme")的函数，后执行了$(document)的函数。

问题的解决

简单再描述一遍，就是我们同时在按钮和页面上绑定了onclick事件，结果就是触发按钮的onclick同时也触发了页面的onclick，因为按钮在页面里面。

其中一个解决方法就是，当触发按钮的onclick时，阻止冒泡事件再往上通知，示意图如下。

代码如下：

在按钮的父元素$("#wrap")上添加onclick事件，来阻止按钮的onclick再向上通知。在$("#wrap")上阻止冒泡事件，使得无论在点击按钮还是显现出来的浮层都不会使浮层消失。

优化

假使页面中有很多个浮层，像上面这样每一个浮层都监听一次$(document)会大大的占用内存，所以思路是使用one()方法，只在点击按钮的时候监听一次$(document)，代码如下：

优化探究

上述优化代码能否简单成下面这样呢？

你看，我在点击按钮的时候只监听一次$("document")，又没有再点击页面了，应该没问题吧？有问题！！！如下图。

点击按钮（蓝色箭头），调用里面的函数，执行①、执行②。注意，这里执行②就是再给页面添加了一个点击事件，且，在执行按钮的点击事件时，冒泡事件的追问是停止的。等调用完了，再接着问按钮的父辈、祖辈们按钮被点击了，你有没有函数需要调用啊？又问到了页面，这时候页面是有函数的，就是之前执行的②。

其实，除了使用阻止冒泡的方式阻止事件的传播，还可以使用setTimeout方法，使需要绑定给页面的函数在冒泡询问完成后再绑定。

使用setTimeout展现冒泡过程

html：

css：

#red.active{
    background: red;
}
#orange.active{
    background: orange;
}
#yellow.active{
    background: yellow;
}
#green.active{
    background: green;
}
#blue.active{
    background: blue;
}
#indigo.active{
    background: indigo;
}
#purple.active{
    background: purple;
}
#purple{
    min-height: 100px;
}
div{
    margin:10px;
    border: 1px solid black;
}

js:

var n=0;
$("div").on("click",function(e){
    setTimeout(function(){
        $(e.currentTarget).addClass("active");
    },n*1000)
    n+=1;
})

效果：

解释：
html和css很好理解。js的意思就是点击$("div")的时候，添加active类，即展现了背景颜色。本例中，点击最内层

的时候，冒泡事件开始询问。

purple，等候n*1000后添加active类，立即执行n+=1

indigo，等候n*1000后添加active类，立即执行n+=1

blue，等候n*1000后添加active类，立即执行n+=1

green，等候n*1000后添加active类，立即执行n+=1

yellow，等候n*1000后添加active类，立即执行n+=1

orange，等候n*1000后添加active类，立即执行n+=1

red，等候n*1000后添加active类，立即执行n+=1

我们该明白的是，所有事情是一步一步做的，即询问下一个div时，n都是已经加过1了，而且，选择器是$("div")，所以，所有div都绑定了事件。

GPU云服务器云服务器冒泡事件事件冒泡事件冒泡机制阻止冒泡事件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96675.html

JS中事件冒泡与捕获

摘要：事件冒泡与事件捕获事件冒泡和事件捕获分别由微软和网景公司提出，这两个概念都是为了解决页面中事件流事件发生顺序的问题。事件冒泡微软提出了名为事件冒泡的事件流。事件冒泡与事件捕获事件冒泡和事件捕获分别由微软和网景公司提出，这两个概念都是为了解决页面中事件流（事件发生顺序）的问题。考虑下面这段代码，就不写html->head,body之类的代码了，自行脑补 Click me! ...

sixleaves 2019-08-21 10:52 评论0 收藏0
彻底搞懂JS事件冒泡与捕获

摘要：事件冒泡与事件捕获事件冒泡和事件捕获分别由微软和网景公司提出，这两个概念都是为了解决页面中事件流事件发生顺序的问题。如下假设三层都有事件监听，这时我们点击的小的蓝方框，事件执行的顺序是怎么样的呢红黄蓝事件冒泡微软提出了名为事件冒泡的事件流。事件冒泡与事件捕获事件冒泡和事件捕获分别由微软和网景公司提出，这两个概念都是为了解决页面中事件流（事件发生顺序）的问题。如下：假设三层div都...

Half 2019-08-02 15:29 评论0 收藏0
彻底搞懂JS事件冒泡与捕获

摘要：事件冒泡与事件捕获事件冒泡和事件捕获分别由微软和网景公司提出，这两个概念都是为了解决页面中事件流事件发生顺序的问题。如下假设三层都有事件监听，这时我们点击的小的蓝方框，事件执行的顺序是怎么样的呢红黄蓝事件冒泡微软提出了名为事件冒泡的事件流。事件冒泡与事件捕获事件冒泡和事件捕获分别由微软和网景公司提出，这两个概念都是为了解决页面中事件流（事件发生顺序）的问题。如下：假设三层div都...

zhangxiangliang 2019-08-23 18:36 评论0 收藏0
彻底搞懂JS事件冒泡与捕获

摘要：事件冒泡与事件捕获事件冒泡和事件捕获分别由微软和网景公司提出，这两个概念都是为了解决页面中事件流事件发生顺序的问题。如下假设三层都有事件监听，这时我们点击的小的蓝方框，事件执行的顺序是怎么样的呢红黄蓝事件冒泡微软提出了名为事件冒泡的事件流。事件冒泡与事件捕获事件冒泡和事件捕获分别由微软和网景公司提出，这两个概念都是为了解决页面中事件流（事件发生顺序）的问题。如下：假设三层div都...

周国辉 2019-08-30 11:22 评论0 收藏0
JS 中的事件冒泡与捕获

摘要：在之前是只支持事件冒泡，包括之后和目前主流的浏览器都同时支持两种事件。中可以用来取消事件冒泡。刚接触 JS 的那个时候，啥也不懂，只想着如何利用 Google、百度到的函数来解决实际的问题，不会想到去一探究竟。渐渐的，对 JS 的语言的不断深入，有机会去了解一些原理性东西。最近在看 JQuery 源码，感触很多，总想着用原生的 JS 去实现自己的一个 JQuery 库。说实在的，J...

Rindia 2019-08-20 11:40 评论0 收藏0