精华内容
下载资源
问答
  • js 冒泡事件

    千次阅读 2018-07-28 10:33:24
    冒泡事件相信很多人多听过,但是具体什么是冒泡事件,有些人估计还是不太清楚! 我在这里简单的说明一下: 冒泡事件:事件从事件目标(target)开始,往上冒泡直到页面的最上一级标签。 来个例子吧,这样清晰一点:...

    冒泡事件相信很多人多听过,但是具体什么是冒泡事件,有些人估计还是不太清楚!

    我在这里简单的说明一下:

    冒泡事件:事件从事件目标(target)开始,往上冒泡直到页面的最上一级标签。

    来个例子吧,这样清晰一点:

    <div class="div1" onclick="fun1();">
      <div class="div2" onclick="fun2();">
        <div class="div3" onclick="fun3();">div3</div>div2
      </div>div1
    </div>
    

    首先写一个html 文件;
    样式吗,我就随便谢谢啦,这里也贴出来

    
      .div1{width: 300px;height: 300px;background: #f0ad4e;}
      .div2{width: 200px;height: 200px;background: #00deff;}
      .div3{width: 100px;height: 100px;background: #9B410E;}

    得到的样式就是这样:

    这里写图片描述

    然后对应的js就是:

      function fun1() {
          console.log("div1")
      }
      function fun2() {
          console.log("div2")
      }
      function fun3() {
          console.log("div3")
      }
    

    这里我们希望,点击div3。就会打印div3,点击div2。就会打印div2,点击div1。就会打印div1.

    但是,我们点击div3时会出现:
    这里写图片描述

    他会执行fun1,fun2,fun3三个方法;
    但是我们希望 他只执行fun3,

    这里我们就要 阻止冒泡事件,
    阻止冒泡事件只需

    <div class="div3" onclick="fun3(event);">div3</div>div2
    
      function fun3(e) {
          console.log("div3")
          e.stopPropagation(); // 用这个
      }

    就可以啦,这是点击div3,就只会打印div3啦,是不是很简单!

    更多补充,敬请期待

    展开全文
  • javascript冒泡事件

    2017-02-16 16:58:28
    什么是冒泡?...阻止冒泡事件也是阻止默认行为。可以用event.preventDefault()这个函数; 不想阻止,就想停掉; 可以用event.stopPropagation()或者return false; 我的顺丰 #cont...
    什么是冒泡?
    
    点击一个click事件的时候当前的click事件执行完成之后外面的click事件也会执行这种就是冒泡事件。
    怎么阻止冒泡?
    阻止冒泡事件也是阻止默认行为。可以用event.preventDefault()这个函数;
    不想阻止,就想停掉;
    可以用event.stopPropagation()或者return false;

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>我的顺丰</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
    <style>
    #content{border: 1px solid red;}
    #msg{border:1px solid #0000FF;margin: 2rem ;}
    </style>
    </head>
    <body class="wrapper">
    <div id="content">
    外层div元素
    <span>内层span元素</span>
    </div>

    <div id="msg"></div>
    </div>
    </body>
    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
    <script type="text/javascript">
    $(function(){
    //为span元素绑定click事件
    $('span').bind('click', function (event) {
    var txt = $('#msg').html() + '<p>内层span元素被点击</p>';
    $('#msg').html(txt);
    alert(1);
    return false;
    });
    //为span元素绑定click事件
    $('#content').bind('click', function (event) {
    var txt = $('#msg').html() + '<p>外层div元素被点击</p>';
    $('#msg').html(txt);
    alert(2);
    });
    //为span元素绑定click事件
    $('body').bind('click', function (event) {
    var txt = $('#msg').html() + '<p>body元素被点击</p>';
    $('#msg').html(txt);
    alert(3);
    });
    });
    </script>
    </html>
    展开全文
  • 主要介绍了JS冒泡事件与事件捕获,结合实例形式分析了javascript冒泡的原理与阻止冒泡的相关操作技巧,需要的朋友可以参考下
  • JS冒泡事件

    2014-09-13 09:02:57
    什么是JS事件冒泡?: 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这...

    转自:http://blog.sina.com.cn/s/blog_a322154901015qkk.html

    什么是JS事件冒泡?

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

    如何来阻止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 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" οnclick="alert('我是最外层');"> 
    <div id="divTwo" οnclick="alert('我是中间层!')"> 
    <a id="hr_three" href="http://www.baidu.com" mce_href="http://www.baidu.com" οnclick="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(); 

    <script type="text/javascript">
            $(function() {
                $("#hr_three").click(function(event) {
                    event.stopPropagation();
                });
            });
    <script>
    

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

    2.return false;
    如果头部加入的是以下代码

    <script type="text/javascript"> 
    $(function() {
        $("#hr_three").click(function(event){     return false;
        });
    }); 
    <script>


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

    由此可以看出:

    1.event.stopPropagation(); 

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

    2.return false;

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

     

    还有一种有冒泡有关的:

    3.event.preventDefault(); 

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

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

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



     

    展开全文
  • js冒泡事件

    2015-02-02 22:32:07
    JavaSciprt事件中有两个很重要的特性:事件冒泡以及目标元素。 事件冒泡: 当一个元素上的事件被触发的时候,比如说鼠标点击了一个按钮,同样的事件将会在那个元素的所有祖先元素中被触发。这 一过程被称为事件冒泡...

    JavaSciprt事件中有两个很重要的特性:事件冒泡以及目标元素。

    事件冒泡: 当一个元素上的事件被触发的时候,比如说鼠标点击了一个按钮,同样的事件将会在那个元素的所有祖先元素中被触发。这 一过程被称为事件冒泡;这个事件从原始元素开始一直冒泡到DOM树的最上层。

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

    事件的冒泡和捕获

    捕获是从上级元素到下级元素,冒泡是从下级元素到上级元素.

    在IE中,每个元素和window对象都有两个方法:attachEvent()和detachEvent()。attachEvent()用来给 一个事件附加事件处理函数。而detachEvent()用来将事件处理函数分离出来。例如:

    Js代码   收藏代码
    1. var fnClick = function() {  
    2.   
    3. alert(“Clicked!”);  
    4.   
    5. }  
    6.   
    7. var oDiv = document.getElementById(“div1”);  
    8.   
    9. oDiv.attachEvent(“onclick”, fnClick);  
    10.   
    11. oDiv.detachEvent(“onclick”, fnClick);  

    事件的冒泡有什么好处呢?

    想象一下现在我们有一个10列、100行的HTML表格,你希望在用户点击 表格中的某一单元格的时候做点什么。比如说我有一次就需要让表格中的每一个单元格在被点击的时候变成可编辑状态。如果把事件处理器加到这1000个单元格 会产生一个很大的性能问题,并且有可能导致内存泄露甚至是浏览器的崩溃。相反地,使用事件代理的话,你只需要把一个事件处理器添加到table元素上就可 以了,这个函数可以把点击事件给截下来,并且判断出是哪个单元格被点击了。

    代码很简单,我们所要关心的只是如何检测目标元素而已。比方说我们有一个 table元素,ID是“report”,我们为这个表格添加一个事件处理器以调用editCell函数。editCell函数需要判断出传到table 来的事件的目标元素。考虑到我们要写的几个函数中都有可能用到这一功能,所以我们把它单独放到一个名为getEventTarget的函数中:

    Js代码   收藏代码
    1. function getEventTarget(e) {  
    2. e = e || window.event;  
    3. return e.target || e.srcElement;  
    4. }  

    e这个变量表示的是一个事件对象,我们只需要写一点点跨浏览器的代码来返回 目标元素,在IE里目标元素放在srcElemtn属性或event.toElement属性中,而在其它浏览器里则是target或event.relatedTarget属性。

    接下来就是editCell函数了,这个函数调用到了 getEventTarget函数。一旦我们得到了目标元素之后,剩下的事情就是看看它是否是我们所需要的那个元素了。

    Js代码   收藏代码
    1. function editCell(e) {  
    2. var target = getEventTarget(e);  
    3. if(target.tagName.toLowerCase() === ‘td’) {  
    4. // DO SOMETHING WITH THE CELL  
    5. }  
    6. }  

    在editCell函数中,我们通过检查目标元素标签名称的方法来确定它是 否是一个表格的单元格。这种检查也许过于简单了点;如果它是这个目标元素单元格里的另一个元素呢?我们需要为代码做一点小小的修改以便于其找出父级的td 元素。如果说有些单元格不需要被编辑怎么办呢?此种情况下我们可以为那些不可编辑的单元格添加一个指定的样式名称,然后在把单元格变成可编辑状态之前先检 查它是否不包含那个样式名称。选择总是多样化的,你只需找到适合你应用程序的那一种。

    事件冒泡的优点和缺点:

    1.那些需要创建的以及驻留在内存中的事件处理器少了。

    这是很重要的一点,这样我们就提高了性能,并降低了崩溃的风险。
    2.在DOM更新后无须重新绑定事件处理器了。

    如果你的页面是动态生成的,比如说通过Ajax,你不再需要在元素被载入或 者卸载的时候来添加或者删除事件处理器了。
    潜在的问题也许并不那么明显,但是一旦你注意到这些问题,你就可 以轻松地避免它们:你的事件管理代码有成为性能瓶颈的风险,所以尽 量使它能够短小精悍。

    不是所有的事件都能冒泡

    blur、focus、load和unload不能像其它事件一样冒泡。事 实上blur和focus可以用事件捕获而非事件冒泡的方法获得(在IE之外的其它浏览器中)。
    需要注意的是:

    如果你的代码处理mousemove事件的话你遇上性能瓶颈的风险可就大了,因为mousemove事件触发非常频繁。而mouseout则因为其 怪异的表现而变得很难用事件代理来管理。

    消除冒泡事件的方法:

    阻止JavaScript事件冒泡传递(cancelBubble 、stopPropagation)
    下面的一段代码即可以很好的解释是么是冒泡效果,什么叫消除冒泡效果

    Html代码   收藏代码
    1. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>  
    2. <html xmlns=”http://www.w3.org/1999/xhtml”>  
    3. <head>  
    4. <title> 阻止JavaScript事件冒泡传递(cancelBubble 、stopPropagation)</title>  
    5. <meta name=”keywords” content=”JavaScript,事件冒泡,cancelBubble,stopPropagation” />  
    6. <script type=”text/javascript”>  
    7. function doSomething (obj,evt) {  
    8. alert(obj.id);  
    9. var e=(evt)?evt:window.event; //判断浏览器的类型,在基于ie内核的浏览器中的使用cancelBubble  
    10. if (window.event) {  
    11. e.cancelBubble=true;  
    12. } else {  
    13. //e.preventDefault(); //在基于firefox内核的浏览器中支持做法stopPropagation  
    14. e.stopPropagation();  
    15. }  
    16. }  
    17. </script>  
    18. </head>  
    19. <body>  
    20. <div id=”parent1″ onclick=”alert(this.id)” style=”width:250px;background-color:yellow”>  
    21. <p>This is parent1 div.</p>  
    22. <div id=”child1″ onclick=”alert(this.id)” style=”width:200px;background-color:orange”>  
    23. <p>This is child1.</p>  
    24. </div>  
    25. <p>This is parent1 div.</p>  
    26. </div>  
    27. <br />  
    28. <div id=”parent2″ onclick=”alert(this.id)” style=”width:250px;background-color:cyan;”>  
    29. <p>This is parent2 div.</p>  
    30. <div id=”child2″ onclick=”doSomething(this,event);” style=”width:200px;background-color:lightblue;”>  
    31. <p>This is child2. Will bubble.</p>  
    32. </div>  
    33. <p>This is parent2 div.</p>  
    34. </div>  
    35. </body>  
    36. </html>  

    把代码直接复制后,打开当点击child1时不仅会弹出 child1, 对话框还会弹出 parent1,这就是冒泡事件的;

    但是单击chile2只会弹出child2却不会弹出 parent2,这便是应用了阻止冒泡事件的特效的效果。

    展开全文
  • 主要是对JS冒泡事件的快速解决方法进行了详细的分析介绍,需要的朋友可以过来参考下,希望对大家有所帮助
  • 冒泡事件 js中“冒泡事件(bubble)”并不是能实际使用的花哨技巧,它是一种对js事件执行顺序的机制,“冒泡算法”在编程里是一个经典问题,冒泡算法里面的“冒泡”应该说是交换更加准确;js里面的“冒泡事件”才是...
  • 事件冒泡 :当一个元素接收到事件的时候 会把他接收到的事件传给自己的父级,一直到window 。代码:<div id="div1"> <div id=...
  • js冒泡事件测试

    2013-04-15 11:14:41
    关于冒泡事件的demo,教你实现js的冒泡处理,适用于各种浏览器
  • js冒泡事件的作用效果

    千次阅读 2017-04-22 09:12:53
    js冒泡事件的实际效果
  • Js冒泡机制是指如果某元素定义了事件A,如click事件,如果触发了事件之后,没有阻止冒泡事件,那么事件将向父级元素传播,触发父类的click函数。 如下例所示: 代码如下: <html> [removed][removed] [removed]...
  • 前端的js冒泡事件

    2019-09-29 18:42:33
    ##前端的js冒泡事件 什么是冒泡事件?我个人通俗的认为,冒泡事件就是从当前事件触发后,当前事件在执行并且一直持续到document(前提是每个元素都有事件),也就是从事件内到事件外。 <style type="text/css"&...
  • Js 冒泡事件阻止

    千次阅读 2017-03-14 11:17:58
    Js 冒泡事件阻止 1. 事件目标 现在,事件处理程序中的变量event保存着事件对象。而event.target属性保存着发生事件的目标元素。这个属性是DOM API中规定的,但是没有被所有浏览器实现 。jQuery对这个...
  • 1. 事件目标 现在,事件处理程序中的变量event保存着事件对象。而event.target属性保存着发生事件的目标元素。这个属性是DOM API中规定的,但是没有被所有浏览器实现 。jQuery对这个事件对象进行了必要的扩展,从而...
  • 在原先的时候有的浏览器支持冒泡事件有的浏览器支持冒泡事件,后来W3C要统一标准就形成了现在的对两种事件都支持,这也是现在浏览器的一个现状。冒泡事件与捕获事件是现代浏览器执行事件的两个不同阶段,事件的代理...
  • javascript冒泡事件代码

    2016-09-02 20:02:04
    关于JavaScript事件冒泡的代码

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 81,231
精华内容 32,492
关键字:

js冒泡事件