关于事件冒泡和事件捕获

最新推荐文章于 2023-06-26 19:13:07 发布

jaycxing

最新推荐文章于 2023-06-26 19:13:07 发布

阅读量527

点赞数

分类专栏： js相关文章标签： function 浏览器 ie 文档测试 div

本文链接：https://blog.csdn.net/jaycxing/article/details/5843798

版权

js相关专栏收录该内容

19 篇文章 0 订阅

订阅专栏

把下面的例子拿去测试下就知道了。

事件冒泡：

下面的例子演示了：

什么叫事件冒泡？

如何阻止冒泡？在IE和FF浏览器内阻止冒泡行为是不同的。IE中使用cancelBubble，FF中使用stopPropation()。

<html>
<head>
<title>阻止冒泡</title>
<style>
body{ color:#333; font-size:12px; }
</style>
</head>
<body>
<p>什么是事件冒泡,通俗的来讲就是我们为页面内body添加一个单击事件,同样再为页面内li元素添加一个单击事件..当你单击li的时候.<br>
body的事件也会被触发.....因为li被包含在body元素内...你单击了li同时也单击了body...这就是事件冒泡....<br />
在有些时候.我们要阻止这种情况发生...也就是单击li事件.不会触发body的事件.... 这就叫阻止冒泡!
<div id="a">
    <ul id="lia">请单击下面的列表.会触发body事件
        <li>项目1</li>
        <li>项目2</li>
        <li>项目3</li>
    </ul>

    <ul id="lib">请单下面的列表.不会触发body事件.
        <li>项目1</li>
        <li>项目2</li>
        <li>项目3</li>
    </ul>
</div>
<script language="javascript">
document.body.onclick = function(){//首先为body元素绑定一个单击事件
    alert("BODY事件");//单击页面即弹出对话框
}

function att_Event(){//为第一组li元素绑定onclick事件
    var li = document.getElementById("lia").getElementsByTagName("li");
    for(var i=0;i<li.length;i++){
        li[i].onclick = function(){
            alert("Li事件");
        }
    }
}

function att_Event_b(){//为第二组li元素绑定onclick事件
    var li = document.getElementById("lib").getElementsByTagName("li");
    for(var i=0;i<li.length;i++){
        li[i].onclick = function(e){
            alert("Li事件");
            stopBubble(e); //运行阻止冒泡的函数
        }
    }
}
//该函数的功能用来阻止事件冒泡．并兼容多浏览器
function stopBubble(e){
    //如果传入了事件对象.那么就是非IE浏览器
    if(e && e.stopPropagation){
        //因此它支持W3C的stopPropation()方法
        e.stopPropagation();
    }
    else
    {
        //否则,我们得使用IE的方式来取消事件冒泡
        window.event.cancelBubble = true;
    }
}

window.onload = function(){
    att_Event();
    att_Event_b();
}
</script>
</body>
</html>

事件捕获：

什么叫事件 捕获，事件捕获是从上到下的，

而事件冒泡是从下到上的。

如何启动事件捕获：

如果在调用 addEventListener 时第三个参数设置为 true 则添加了一个捕获事件(capturing event)监听器。和普通事件监听器不同，捕获事件监听器可以在文档事件被送往目标之前探测事件。

如：

 <body>

    <p οnclick="alert('you clicked the p')">click to test</p>

和

document.body.addEventListener('click', func, true)

BODY 元素的事件监听器会在 P 元素的 onclick 执行前运行。BODY 元素事件监听器甚至可以选择终止事件传播，这样事件将传不到 P 标签去。方法如下：

document.body.addEventListener( 'click', function(e){ if(confirm('Stop event?'))e.stopPropagation(); }, true );

如果 BODY 事件监听器不是捕获事件监听器，则会先执行 P onclick 函数，然后才会执行 BODY 事件监听器。事件捕获一种改变事件传播顺序的机制。

谢谢。加油

jaycxing

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于事件冒泡和事件捕获

<br /> <br />把下面的例子拿去测试下就知道了。<br /> <br />事件冒泡：<br />下面的例子演示了：<br /> 什么叫事件冒泡？<br /> 如何阻止冒泡？在IE和FF浏览器内阻止冒泡行为是不同的。IE中使用cancelBubble，FF中使用stopPropation()。<br /> <br /> <br /><html><br /><head><br /><title>阻止冒泡</title><br /><style><br />bo
复制链接

扫一扫