什么是JS事件冒泡?

最新推荐文章于 2022-12-20 00:05:29 发布
最新推荐文章于 2022-12-20 00:05:29 发布
阅读量655 收藏 1
点赞数
分类专栏： JS

什么是JS事件冒泡？：

在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。  

如何来阻止Jquery事件冒泡？

 

通过一个小例子来解释

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default5.aspx.cs" Inherits="Default5"%>



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title>Porschev---Jquery 事件冒泡</title>



    <script src="jquery-1.3.2-vsdoc.js" type="text/javascript"></script>

    

</head>

<body>

    <form id="form1" runat="server">

    <div id="divOne" onclick="alert('我是最外层');">

         <div id="divTwo" onclick="alert('我是中间层！')">

             <a id="hr_three" href="http://www.baidu.com" mce_href="http://www.baidu.com" onclick="alert('我是最里层！')">点击我</a>

         </div>

    </div>

    </form>

</body>

</html> 

比如上面这个页面，

分为三层：divOne是第外层，divTwo中间层，hr_three是最里层;

他们都有各自的click事件，最里层a标签还有href属性。

 

运行页面，点击“点击我”,会依次弹出：我是最里层---->我是中间层---->我是最外层

---->然后再链接到百度.

 

这就是事件冒泡，本来我只点击ID为hr_three的标签，但是确执行了三个alert操作。

事件冒泡过程（以标签ID表示）：hr_three---->divTwo----> divOne。从最里层冒泡到最外层。

 

如何来阻止?

 

1.event.stopPropagation(); 

 <scripttype="text/javascript">

       $(function() {
           $("#hr_three").click(function(event) {
               event.stopPropagation();
           });
       });
       

<script>

再点击“点击我”，会弹出：我是最里层，然后链接到百度

 

 

 2.returnfalse;

如果头部加入的是以下代码

 <script type="text/javascript">



        $(function() {

            $("#hr_three").click(function(event) {

                  return false;

            });

        });



 <script>

再点击“点击我”，会弹出：我是最里层，但不会执行链接到百度页面

 

由此可以看出：

1.event.stopPropagation(); 

   事件处理过程中，阻止了事件冒泡，但不会阻击默认行为（它就执行了超链接的跳转）

 

 

2.return false;

   事件处理过程中，阻止了事件冒泡，也阻止了默认行为（比如刚才它就没有执行超链接的跳转）

 

 

还有一种有冒泡有关的：

3.event.preventDefault(); 

  如果把它放在头部A标签的click事件中，点击“点击我”。

  会发现它依次弹出：我是最里层---->我是中间层---->我是最外层，但最后却没有跳转到百度

 

   它的作用是：事件处理过程中，不阻击事件冒泡，但阻击默认行为（它只执行所有弹框，却没有执行超链接跳转）

huwenhu2007
关注
专栏目录
什么是事件冒泡？
liuhao9999的博客
03-22 397
当事件发生在DOM元素上时，该事件并不完全发生在那个元素上。在冒泡阶段，事件冒泡，或者事件发生在它的父代，祖父母，祖父母的父代，直到到达window为止。 假设有如下的 HTML 结构： <divclass="grandparent"> <divclass="parent"> <divclass="child">1</div> </div> </div> 对应的 JS 代码: functionadd...
js事件冒泡机制
qq_21747731的专栏
04-14 352
发生条件 事件冒泡发生的条件：当为多个嵌套的元素设置了相同的事件处理程序，它们将触发事件冒泡机制。在事件冒泡中，最内部的元素将首先触发其事件，然后是栈内的下一个元素触发该事件，以此类推，直到到达最外面的元素。如果把事件处理程序指定给所有的元素，那么这些事件将依次触发。 不是所有的事件都能冒泡。以下事件不冒泡：blur、focus、load、unload。 取消事件冒泡 <s...
Jquery 事件冒泡
weixin_34023863的博客
11-04 166
  什么是JS事件冒泡？： 在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。 （摘自网络） ...
JS的事件冒泡和事件捕获
weixin_34387468的博客
03-05 222
先上结论：他们是描述事件触发时序问题的术语。事件捕获指的是从document到触发事件的那个节点，即自上而下的去触发事件。相反的，事件冒泡是自下而上的去触发事件。绑定事件方法的第三个参数，就是控制事件触发顺序是否为事件捕获。true,事件捕获；false,事件冒泡。默认false,即事件冒泡。Jquery的e.stopPropagation会阻止冒泡，意思就是到我为止，我的爹和祖宗的事件就不要触发...
jQuery 事件冒泡
shuai的博客
04-13 342
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script> <link rel="stylesheet" href...
JavaScript事件传播(冒泡机制)
weixin_30753873的博客
08-12 160
今天在使用javascript弹出菜单时遇到了问题,搞了一晌终于算有点眉目了.和大家一起分享下.有什么不对的地方希望大家多多留言评论. 定义:JavaSciprt事件中有两个很重要的特性：事件冒泡 以及目标元素 。 事件冒泡: 当一个元素上的事件被触发的时候，比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡；这个事件从原始元素开始一直冒...
什么是事件冒泡?它是如何工作的?如何阻止事件冒泡、默认行为? (前端面试题)
2201_75652841的博客
12-20 266
什么是事件冒泡?它是如何工作的?如何阻止事件冒泡、默认行为? (前端面试题)
JavaScript 事件冒泡简介及应用
12-10
JavaScript 事件冒泡是Web开发中的一个重要概念，它涉及到用户与网页交互时事件的处理方式。事件冒泡是指在一个对象上触发的事件会按照从内到外的顺序依次经过其所有父级元素，直到到达文档的根节点（通常是document...
JS中绑定事件顺序（事件冒泡与事件捕获区别）
10-20
JavaScript中的事件处理机制是网页交互的核心，其中包括了两种主要的事件传播模式：事件冒泡（Bubbling）和事件捕获（Cropping）。事件冒泡是指事件从最深的节点开始，然后逐级向上传播到最外层的节点。而事件捕获则...
javascript 中事件冒泡和事件捕获机制的详解
01-19
javascript 中事件冒泡和事件捕获机制的详解 二者作用：描述事件触发时序问题 事件捕获：从document到触发事件的那个节点，即自上而下的去触发事件—由外到内 事件冒泡：自下而上的去触发事件—由内到外 绑定事件...
什么是JS事件冒泡？
lxf0613050210的博客
01-31 298
什么是JS事件冒泡？： 在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理 程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次 的最顶层，即document对象（有些浏览器是window）。   如何来阻止Jq
js事件冒泡
兔子学前端
11-23 155
冒泡 *{margin: 0;padding:0;} .div1{width: 400px;height: 200px;background: red;position: absolute;top: 100px;left: -400px;} .div2{width: 200px;height: 100px;background: blue;top: 50px;left: 400px
js中事件冒泡
im_dogg的博客
11-16 598
我们先来说一下什么是事件冒泡 事件冒泡：当一个元素接收到事件后，会沿着DOM结构将事件逐层传递到其父元素上  在页面中写三个嵌套的div，dom结构如下 &lt;/head&gt; &lt;body&gt; &lt;div id="one"&gt; &lt;div id="two"&gt; &lt;div id="three"&gt
JS中的事件冒泡
qq_41557320的博客
10-09 2949
js中的事件冒泡指的是：多个元素嵌套的时候，它们就会有层次关系，当这些元素注册了相同的事件时，如果其中一层的元素触发了这个事件，可能导致其它层的元素也触发这个事件，这样一来就会造成混乱。这个情况就是事件冒泡。为了避免这种混乱的发生，我们要想办法阻止事件冒泡的发生。 看一个事件冒泡的例子： 上面是三个相互嵌套的div，样式代码这里省略了，js代码中，分别为这三个div注册了onclick点击事件...
JavaScript的事件冒泡是什么
qq_19396231的博客
08-04 187
JavaSciprt事件中有两个很重要的特性：事件冒泡以及目标元素。 当一个元素上的事件被触发的时候，比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡；这个事件从原始元素开始一直冒泡到DOM树的最上层。 任何一个事件的目标元素都是最开始的那个元素，在我们的这个例子中也就是按钮，并且它在我们的元素对象中以属性的形式出现。使用事件代理的话我们可以把...
Javascript的事件冒泡
热门推荐
Night_nigh的博客
03-27 1万+
今天呢，来讲一个知识点，叫做Javascript的事件冒泡（Bubble），什么叫事件冒泡，就是指某件事件的向上传导，当后代元素被触发，其祖先元素也会被同样触发，这就是事件冒泡，光说不行，还得先演示一下。 首先，我们先创建一个“HTML”文档，在头部部分写上一个内联样式“style”，给“body”一个背景颜色，在“body”部分写上两个“div”给他们写上一个“ID”名（取名随意） 再创建两个不同大小的方块也给他们一个背景颜色（这里大小 颜色随意），就像这样： 然后就开始“...
js事件的冒泡
weixin_45561258的博客
04-08 2617
1.事件的冒泡（Bubble） 所谓的冒泡指的就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发。 在开发中大部分情况冒泡都是有用的,如果不希望发生事件冒泡可以通过事件对象来取消冒泡 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #bigb
JS的冒泡事件
哈喽沃德
11-22 2420
JS的冒泡事件什么是冒泡事件？ 在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window） -摘自网络 这里
Js如何阻止事件冒泡？
最新发布
05-26
在 JavaScript 中，可以使用 `event.stopPropagation()` 方法来阻止事件冒泡。这个方法可以在事件处理函数中调用，用于阻止事件从当前元素一直冒泡到父元素或祖先元素。 例如，下面的代码实现了当点击某个元素时，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值