本文来源于WEB开发笔记 http://www.chhua.com , 原文地址: http://www.chhua.com/web-note1109
一、什么是事件冒泡
在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶层,即document对象(有些浏览器是window)。
二、事件冒泡有什么作用
(1)事件冒泡允许多个操作被集中处理(把事件处理器添加到一个父级元素上,避免把事件处理器添加到多个子级元素上),它还可以让你在对象层的不同级别捕获事件。
【集中处理例子】
<div onclick="eventHandle(event)" id="outSide" style="width:100px; height:100px; background:#000; padding:50px">
<div id="inSide" style="width:100px; height:100px; background:#CCC"></div>
<div id="inSide2" style="width:100px; height:100px; background:#000000"></div>
</div>
<script type="text/javascript">
//本例子只在外面盒子定义了处理方法,而这个方法一样可以捕获到子元素点击行为并处理它。假设有成千上万子元素要处理,难道我们要为每个元素加“onclick="eventHandle(event)"”?显然没有这种集中处理的方法来的简单,同时它的性能也是更高的。
function eventHandle(e)
{
var e=e||window.event;
var obj=e.target||e.srcElement;
alert(obj.id+' was click')
}
</script>
<div onclick="openWin('http://www.chhua.com')" id="outSide" style="width:100px; height:100px; background:#000; padding:50px">
<div onclick="openWin('http://www.google.com')" id="inSide" style="width:100px; height:100px; background:#CCC"></div>
</div>
<script type="text/javascript">
//本例你实际希望点击灰色盒子打开google首页,而点击黑色盒子打开www.chhua.com发发首页,但结果你点击灰色盒子的时候,却是同时打开了两个网页。其实在实际设计中较少遇到此问题,你可能会想如果我在页面不同DOM深处安置了不同的按钮或链接,深层处的事件触发会不会波及顶层的按钮呢?不会,因为按钮不能形成嵌套关系。
function openWin(url)
{
window.open(url);
}
</script>
【阻止事件冒泡例子】
<div onclick="showMsg(this,event)" id="outSide" style="width:100px; height:100px; background:#000; padding:50px">
<div onclick="showMsg(this,event)" id="inSide" style="width:100px; height:100px; background:#CCC"></div>
</div>
<script type="text/javascript">
//阻止事件冒泡后,你点击灰色盒子,整个过程只弹一次对话框了(注意与默认情况对比)
function showMsg(obj,e)
{
alert(obj.id);
stopBubble(e)
}
//阻止事件冒泡函数
function stopBubble(e)
{
if (e && e.stopPropagation)
e.stopPropagation() //其它浏览器
else
window.event.cancelBubble=true //ie下
}
</script>
三、需要注意什么
●事件捕获其实有三种方式,事件冒泡只是其中的一种:(1)IE从里到外(inside→outside)的冒泡型事件。(2)Netscape4.0从外到里(outside→inside)的捕获型事件。(3)DOM事件流,先从外到里,再从里到外回到原点(outside→inside→outside)的事件捕获方法(似乎对象将触发两次事件处理,这有什么作用?鄙人不懂!)。
分享到:
相关推荐
传统事件捕获和冒泡的流程解析
javascript事件冒泡,事件捕获和事件委托详解 1、事件冒泡:在javascript事件传播过程中,当事件在一个元素上出发之后,事件会逐级传播给先辈元素,直到document为止,有的浏览器可能到window为止。并不是所有的...
事件冒泡、事件捕获和事件委托 在javascript里,事件委托是很重要的一个东西,事件委托依靠的就是事件冒泡和捕获的机制,我先来解释一下事件冒泡和事件捕获: 事件冒泡会从当前触发的事件目标一级一级往上传递,...
javascript 中事件冒泡和事件捕获机制的详解 二者作用:描述事件触发时序问题 事件捕获:从document到触发事件的那个节点,即自上而下的去触发事件—由外到内 事件冒泡:自下而上的去触发事件—由内到外 绑定事件...
本文主要介绍了JS中绑定事件顺序(事件冒泡与事件捕获区别)。具有很好的参考价值,下面跟着小编一起来看下吧
谈起JavaScript的 事件,事件冒泡、事件捕获、阻止默认事件这三个话题,无论是面试还是在平时的工作中,都很难避免。 事件捕获阶段:事件从最上一级标签开始往下查找,直到捕获到事件目标(target)。 事件冒泡阶段:...
主要介绍了javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结的相关资料,需要的朋友可以参考下
javascript, jquery的事件中都存在事件冒泡和事件捕获的问题,下面将两种问题及其解决方案做详细总结。 事件冒泡是一个从子节点向祖先节点冒泡的过程; 事件捕获刚好相反,是从祖先节点到子节点的过程。 给一个...
主要介绍了一JS的事件冒泡和事件捕获,通过代码举例详细描述了两者之间的差别,需要的朋友可以参考下
本文实例讲述了JS html事件冒泡和事件捕获操作。分享给大家供大家参考,具体如下: 今天学习了事件冒泡和捕获,记录一下。...点击事件捕获冒泡实验</title> </head> <body> <div i
DOM事件标准定义了两种事件流,这两种事件流有着显著的不同并且可能对你的...和许多Web技术一样,在它们成为标准之前,Netscape和微软各自不同地实现了它们,下面介绍DOM事件阶段以及事件捕获与事件冒泡先后执行顺序
事件捕获:当一个事件触发后,从window对象出发,不断经过下级节点,直到目标节点,这个过程就是事件捕获。自内而外,从根到叶,从小到大。 事件冒泡:即是事件开始时由最具体的元素接收,然后逐级向上传播到较为不...
(1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。 IE 5.5: div -> body -> document IE 6.0: div -> body -> html -> document Mozilla 1.0: div -> body -> ...
想要了解什么是事件捕获与冒泡,需要先了解什么是事件。 什么是事件? 我们知道,在前端开发中,JavaScript负责定义网页的“行为”。这里所说的“定义”,其实指的是开发者可以通过JavaScript语言向浏览器描述一些...
Javascript事件流(事件捕获、事件冒泡)–>事件委托(代理) Javascript与HTML之间的交互是通过“事件”实现的。事件,就是文档或浏览器窗口发生的一些特定的交互瞬间,当我们与浏览器中的web页面进行特定的交互时...
事件冒泡及捕获的文档及示例代码,例子写得比较简单,请结合文档来看。
事件冒泡原理 从下至上 从最里面元素事件冒泡到最外层父级元素上 大哥 二哥 三弟 var a = document.getElementsByClassName('a')[0] var b = document.getElementsByClassName('b')[0] var c = document....