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阻止事件冒泡

  • 2012-11-25 12:53
  • 227KB
  • 下载

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

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

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

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

阻止javascript事件冒泡的另一种方式

关于javascript的事件模型可以参考这篇文章: http://blog.csdn.net/chenmoquan/article/details/10162477 讲的非常全面。 javascr...

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

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

javascript: click 阻止冒泡事件

var lastli = null; function Show(currentLi, index, evt) { doSomething(evt)...

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

就是说用Div框住flash  Div的鼠标事件不传递给Body 文中说的方法记录一下 /*---------------------------     功能:停止事件冒泡     ...

Javascript事件模型:捕获和冒泡

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

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

转载自JavaScript 详说事件机制之冒泡、捕获、传播、委托JavaScript 详说事件机制之冒泡、捕获、传播、委托DOM事件流(event flow )存在三个阶段:事件捕获阶段、处于目标阶...

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

1.事件冒泡 事件冒泡机制:事件冒泡基本原理是事件从特定的目标对象向不特定的目标对象进行触发,简单点就是从触发事件开始的元素开始向上冒泡。 同时不同浏览器版本,事件冒泡触发的最终位置或经过...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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