`

Jquery中的事件冒泡

阅读更多

 

  •  事件中的冒泡现象

严格来说,事件在出发后分为两个阶段,一个是捕获,一个是冒泡,但有些遗憾的是,大多数浏览器并不是都支持捕获阶段,Jquery也不支持,因此在事件触发后,往往执行冒泡过后曾,所谓的冒泡其实质就是事件的执行中的顺序,下面通过一个实例来说明冒泡现象。

 

实现的源码:

<!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>
    <title>事件中的冒泡现象</title>
    <script type="text/javascript" 
            src="jquery-1.11.1.js">
    </script>
    <style type="text/css">
           body{font-size:13px} 
           .clsShow{border:#ccc 1px solid;background-color:#eee;margin-top:15px;padding:5px;width:220px;line-height:1.8em;display:none}
           .btn {border:#666 1px solid;padding:2px;width:50px;
           filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff, EndColorStr=#ECE9D8);}
    </style>
    <script type="text/javascript">
        $(function() {
            var intI = 0; //记录执行次数
            $("body,div,#btnShow").click(function(event) {//点击事件
                intI++; //次数累加
                $(".clsShow")
                .show()//显示
                .html("您好,欢迎来到jQuery世界!")//设置内容
                .append("<div>执行次数 <b>" + intI + "</b> </div>"); //追加文本
                //event.stopPropagation();//阻止冒泡过程
                //return false;//也能阻止事件的冒泡
            })
        })
    </script>
</head>
<body>
    <div>
        <input id="btnShow" type="button" value="点击" class="btn" />
    </div>
    <div class="clsShow"></div>
</body>
</html>

 

实现的效果:


代码分析:

为什么在实例中,仅是单击按钮,但却执行了3此同样的程序呢?这是因为事件在执行的过程中存在冒泡现象,即虽然单击的是按钮,但按钮的外围<div>元素的事件也被触发,同时div元素的外围的body元素的事件也随之触发,其整个事件涉及的过程就像水泡一样向外冒,故称为冒泡过程。

 

  •  如何阻止冒泡的发生

通过调用event.stopProPagation()方法就是可以阻止事件的冒泡,修改完成之后,再次点击页面的按钮,其显示的次数为1,即阻止了事件的冒泡,而没有涉及其他外围元素的时间触发。

其实还有一种可以阻止事件的冒泡,那就是return false,在代码已经注释掉了。

 

PS:最近要开始学习和复习一点东西了,温故而知新嘛,即使再简单的问题,也有可能当时很纠结想不到问题的解决之道。

记于2015年晚20:41

 

 

 

 

  • 大小: 1.9 KB
分享到:
评论

相关推荐

    jquery-事件冒泡

    jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡...

    jquery阻止事件冒泡

    jQuery中的`event.stopPropagation()`方法是阻止事件冒泡的关键。当一个元素上的事件处理器调用此方法时,它会阻止事件继续在其DOM层次结构中向上传播,防止任何父级处理程序被执行。这可以帮助我们精确控制事件的...

    js阻止冒泡及jquery阻止事件冒泡示例介绍.docx

    ### JS与jQuery阻止事件冒泡详解 #### 一、引言 在Web开发中,事件处理是不可或缺的一部分,其中事件冒泡机制尤为重要。事件冒泡是指事件从最深层的节点开始,逐级向上传播至最顶层的节点。在某些情况下,我们希望...

    事件冒泡是什么如何用jquery阻止事件冒泡

    在jQuery中,可以通过几种方式来阻止事件冒泡。 - 使用返回false的方式:在事件处理函数中直接返回false,这将同时阻止事件冒泡和事件的默认行为。例如:`$(selector).click(function() { return false; });` - ...

    jquery hover 冒泡事件制作心型图片墙鼠标悬浮图片

    在本文中,我们将深入探讨如何使用jQuery的hover事件来创建一个独特的心形图片墙,当鼠标悬浮在图片上时,会产生动态效果。首先,我们需要理解jQuery库的基本概念以及hover事件的工作原理。 jQuery是一个广泛使用的...

    jquery-tooltip

    jquery-tooltip 冒泡事件

    理解jquery事件冒泡

    一、什么是jquery事件冒泡 在很多教材或者手册都可能会涉及到事件冒泡的概念,老手来说这当然是最基本的概念,但往往对于初学者可能比较陌生或者说从来没有听说过。下面就结合代码实例来简单介绍一下什么是事件冒泡...

    利用JQuery阻止事件冒泡

    在Web开发中,事件冒泡是JavaScript中一个重要的机制,当一个元素上发生了事件,比如点击、鼠标经过等,这个事件不仅会在该元素上触发,还会向上传播到更高级的元素,如父元素、祖父元素等。这样的设计便于我们对一...

    jquery图片冒泡提示效果

    总结来说,jQuery图片冒泡提示效果是通过jQuery库实现的一种增强用户体验的交互设计,通过监听鼠标事件、动态创建和定位提示框、应用动画效果,为用户提供直观的信息展示,提升了网页的视觉吸引力和可用性。...

    jquery取消事件冒泡的三种方法(推荐)

    在jQuery事件处理函数中直接返回`false`是一种最简单的方式来同时阻止事件的默认行为和事件的冒泡传播。示例如下: ```javascript $("form").submit(function(){ return false; }); ``` 这段代码会阻止表单的...

    jquery关于事件冒泡和事件委托的技巧及阻止与允许事件冒泡的三种实现方法

    在JavaScript和jQuery中,事件处理有两个关键概念:事件冒泡和事件委托。事件冒泡是指事件从最深的节点开始,然后逐级向上层元素传播事件。事件委托则是利用事件冒泡的特性,将事件处理器绑定到一个父元素上,以此来...

    jquery_tips,JQ实现的冒泡提示

    二、JQuery冒泡提示的原理 冒泡提示,通常是指当鼠标悬停在某个元素上时,该元素周围会弹出一个包含提示信息的小窗口,就像水中的气泡一样。在jQuery中,我们主要通过CSS来定义提示框的样式,而JavaScript则负责...

    jQuery中阻止冒泡事件的方法介绍

    目标元素: 任何一个事件的目标元素都是最开始的那个元素,在我们的这个例子中也就是按钮,并且它在我们的元素对象中以属性的形式出现。使用事件代理的话我们可以把事 件处理器添加到一个元素上,等待一个事件从它的...

    jquery阻止冒泡实例

    jquery阻止冒泡的所有方法,适合初学jquery者,是一篇很好的学习文稿

    jQuery彩色心形冒泡动画特效

    在本项目中,"jQuery彩色心形冒泡动画特效"是一个使用jQuery库创建的互动视觉效果,它展示了多彩的心形图标以气泡的形式从页面底部向上浮动,为网站增添了一种动态和趣味性的元素。这个特效可以应用于各种场合,如...

    jquery实现的冒泡放大器

    首先,理解"冒泡"这一概念,它源于编程中的事件冒泡机制,指的是事件从最深的节点开始,逐级向上层节点传播事件的过程。在这里,我们借用这一概念,让元素在鼠标悬停时像气泡一样从小变大,从而产生视觉上的“冒泡”...

Global site tag (gtag.js) - Google Analytics