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

最新推荐文章于 2022-09-15 22:58:34 发布

置顶 KeenWon

最新推荐文章于 2022-09-15 22:58:34 发布

阅读量3k

点赞数 1

分类专栏： Javascript 文章标签： javascript function div xhtml class

本文链接：https://blog.csdn.net/semanwmj/article/details/7403492

版权

Javascript 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

事件冒泡

事件捕获：父级元素先触发，子级元素后触发

事件冒泡：子级元素先触发，父级元素后触发

现在在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" οnclick="javascript:alert('外');">
        <div class="div2" οnclick="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