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

事件冒泡

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

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


现在在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就是事件源
        }


  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值