javsascript的事件冒泡

最新推荐文章于 2021-09-01 14:27:50 发布

chenpeiyuan0314

最新推荐文章于 2021-09-01 14:27:50 发布

阅读量120

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/timlentse/blog/335648

版权

什么是事件冒泡

当我们在一个Web页面中单击鼠标时（或者其他事件），绝大多数情况下，我们无需关心单击事件会带来哪些奇怪的响应，因为我们通常只是为一个元素设置一个事件处理程序，但是如果你为多个嵌套的元素设置了相同的事件处理程序，那么你就要格外小心了。

原因在于如果在嵌套的某个元素上触发某个事件（比如单击onclick事件），如果此元素定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级元素传播，从里到外，直至它被处理（父级元素所有同类事件都将被激活），或者它到达了元素层次的最顶层，即document对象（有些浏览器是window）。

不妨先看看下面的例子：

<body>
<div onclick="eventHandle(event)" id="outSide" style="width:100px; height:100px; background:#000; padding:50px">
<div onclick="eventHandle(event)" id="inSide"  style="width:100px; height:100px; background:#CCC"></div>
</div>
<script type="text/javascript">
function eventHandle(event)
{
    var theEvent=event||window.event;
    var obj=theEvent.target||theEvent.srcElement;
    alert(obj.id+' was click')
}
</script>
</body>

如果你点击灰色的框框，结果会出现两个alert, 这样因为事件冒泡的原因，黑色大框框也会收到单击事件，并调用了自己的处理程序，如果还有更多盒子嵌套，一样道理，尽管我们没有给里面的灰色框框绑定onclick，当点击灰色框框，同样会触发外面的黑色大框框的onclick程序执行。

需要注意什么

●事件捕获其实有三种方式，事件冒泡只是其中的一种：（1）IE从里到外（inside→outside）的冒泡型事件。（2）Netscape4.0从外到里（outside→inside）的捕获型事件。（3）DOM事件流，先从外到里，再从里到外回到原点（outside→inside→outside）的事件捕获方法（似乎对象将触发两次事件处理，这有什么作用？鄙人不懂！）。

●不是所有的事件都能冒泡。以下事件不冒泡：blur、focus、load、unload。

●事件捕获方式在不同浏览器，甚至同种浏览器的不同版本中是有所区别的。如Netscape4.0采用捕获型事件解决方案，其它多数浏览器则支持冒泡型事件解决方案，另外DOM事件流还支持文本节点事件冒泡。

●事件捕获到达顶层的目标在不同浏览器或不同浏览器版本也是有区别的。在IE6中HTML是接收事件冒泡的，另外大部分浏览器将冒泡延续到window对象，即……body→documen→window。

●阻止冒泡并不能阻止对象默认行为。比如submit按钮被点击后会提交表单数据，这种行为无须我们写程序定制。

如何阻止事件冒泡

在IE中取消事件冒泡，可以调用cancelBubble属性，对于Mozilla模型来说，则应该使用事件的stopPropagation方法

以下是一个例子

<div onclick="setupEvent(this,event)" id="outSide" style="width:100px; height:100px; background:#000; padding:50px">
<div onclick="setupEvent(this,event)" id="inSide" style="width:100px; height:100px; background:#CCC"></div>
</div>
<script type="text/javascript">
//阻止事件冒泡后，你点击灰色框框，整个过程只弹一次对话框了（注意与默认情况对比）
function setupEvent(obj,event)
{
    alert(obj.id+"was clicked!");
    stopEvent(event);
}

//阻止事件冒泡函数
function stopEvent(event)
{
    if (event && event.stopPropagation){
        event.stopPropagation();
   } else {
        window.event.cancelBubble=true;
        }
}
</script>

转载于:https://my.oschina.net/timlentse/blog/335648