Javascript的事件冒泡和事件捕获,阻止事件冒泡,事件源target

原创 2012年03月28日 16:59:28

事件冒泡

事件捕获:父级元素先触发,子级元素后触发

事件冒泡:子级元素先触发,父级元素后触发


现在在IE和FF下,触发事件基本都是事件冒泡,由内向外的执行

<!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>
    <style type="text/css">
        *{ margin:0; padding:0; }
        .div1{ width:200px; height:200px; background-color:#cccccc; overflow:hidden; }
        .div2{ width:100px; height:100px; background-color:gray; margin:50px; }
    </style>
</head>
<body>
    <div class="div1" onclick="javascript:alert('外');">
        <div class="div2" onclick="javascript:alert('内');"></div>
    </div>
</body>
</html>

点击div2的时候,先显示“内”,再显示“外”,这就是事件冒泡


阻止事件冒泡

方法:

        function stopBubble(event) {
            if (event && event.stopPropagation) {
                event.stopPropagation();
            } else {
                window.event.cancelBubble = true;
            }
        }

使用:

    //监视用户何时把鼠标移到元素上,
    //为该元素添加红色边框
    unionDom[i].onmouseover = function(e) {
        this.style.border = "1px solid red";
        stopBubble( e );
    };

获取事件源:

        function (event) {
            var e = event || window.event;
            var elem = e.srcElement || e.target;

            alert(elem.id);//elem就是事件源
        }


参考:

javascript事件冒泡与事件捕获  

javascript阻止冒泡事件、事件源target、当前目标currentTarget解释

javascript阻止事件冒泡和浏览器的默认行为


新博客已移至:http://keenwon.com


关于jquery中用on绑定事件后的事件冒泡问题

用on绑定时,我把子元素的 绑定到 document,而把父元素绑定到上级元素,导致 return false 阻止冒泡无效。 事件冒泡 $(func...
  • z69183787
  • z69183787
  • 2014年12月17日 16:14
  • 11325

彻底弄懂JS的事件冒泡和事件捕获

他们是描述事件触发时序问题的术语。事件捕获指的是从document到触发事件的那个节点,即自上而下的去触发事件。相反的,事件冒泡是自下而上的去触发事件。绑定事件方法的第三个参数,就是控制事件触发顺序是...
  • qq_28602957
  • qq_28602957
  • 2017年03月05日 20:25
  • 2187

面试题-冒泡与捕获、事件委托、ie事件和dom模型事件、鼠标事件

很好的博文http://younglab.blog.51cto.com/416652/274132!
  • zd10101501
  • zd10101501
  • 2014年04月17日 21:38
  • 1482

javascript事件冒泡详解和捕获、阻止方法

javascript事件冒泡详解和捕获、阻止方法 一、事件的发生顺序 这个问题的起源非常简单,假设你在一个元素中又嵌套了另一个元素 代码如下: ------------...
  • wustzbq0713
  • wustzbq0713
  • 2015年06月06日 12:35
  • 396

javascript阻止冒泡和默认事件(默认行为)

阻止冒泡。冒泡简单的举例来说,儿子知道了一个秘密消息,它告诉了爸爸,爸爸知道了又告诉了爷爷,一级级传递从而引起事件的混乱,而阻止冒泡就是不让儿子告诉爸爸,爸爸自然不会告诉爷爷了。下面的domo就是很好...
  • sir1241
  • sir1241
  • 2016年10月12日 16:28
  • 253

javascript阻止事件冒泡和浏览器的默认行为

在使用javascript编程时会遇到一个问题,就是当你给html添加事件时,由于浏览器默认的为冒泡型事件触发机制,所以会触发你不想触发的事件.那么通过如下的函数可以解决这个问题.[兼容IE和FF] ...
  • viana37
  • viana37
  • 2016年03月03日 14:22
  • 329

Javascript事件模型:捕获和冒泡

在Javascript中用户交互的核心部分就是事件处理。本文为对事件模型和处理机制的总体性描述。Event是什么?event是用户操作网页时发生的交互动作,比如click/move, event除了用...
  • iefreer
  • iefreer
  • 2013年02月17日 18:28
  • 7823

javascript事件捕获和冒泡

1、先看一下事件传播的两种形式: DOM事件标准定义了两种事件流,这两种事件流有着显著的不同并且可能对你的应用有着相当大的影响。这两种事件流分别是捕获和冒泡。 (1)、事件捕获: 事件的处理...
  • zhaoting132
  • zhaoting132
  • 2013年11月25日 17:45
  • 560

Javascript笔记—事件分析(冒泡,捕获,代理)

1.事件冒泡 事件冒泡机制:事件冒泡基本原理是事件从特定的目标对象向不特定的目标对象进行触发,简单点就是从触发事件开始的元素开始向上冒泡。 同时不同浏览器版本,事件冒泡触发的最终位置或经过...
  • u012475786
  • u012475786
  • 2016年12月16日 12:47
  • 180

JavaScript 详说事件机制之冒泡、捕获、传播、委托

转载自JavaScript 详说事件机制之冒泡、捕获、传播、委托JavaScript 详说事件机制之冒泡、捕获、传播、委托DOM事件流(event flow )存在三个阶段:事件捕获阶段、处于目标阶...
  • winfredzen
  • winfredzen
  • 2017年03月01日 15:48
  • 295
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Javascript的事件冒泡和事件捕获,阻止事件冒泡,事件源target
举报原因:
原因补充:

(最多只允许输入30个字)