什么情况用到事件冒泡和事件捕获？？JavaScript基础_百度知道
什么情况用到事件冒泡和事件捕获？？JavaScript基础
我有更好的答案
例如：从div-body-html-document,Cdiv id=&divid&quot：document.getElementById(&quot:&lt事件捕获是为了逐层确定事件的来源; onclick=&点击object&&&/divid&)事件冒泡是为了逐级响应事件，例如：从document-html-body-div,Code
答非所问，这个我也知道，我说的是什么情况下用到，亲
为您推荐：
其他类似问题
javascript的相关知识
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。事件流指的是页面中接收事件的顺序，IE，火狐和chrome浏览器都是事件冒泡，所谓是事件冒泡指的是事件最开始由最具体的元素接收，然后逐级向上传播到不具体的节点。而事件捕获则正好相反，事件捕获是由Netscape提出的，事件冒泡和捕获具体如下图所示：
虽然事件捕获是Netscape唯一支持的事件流模型，但目前IE9，火狐和谷歌也都支持这种事件流模型。
因为事件具有冒泡机制，因此我们可以利用冒泡的原理，把事件加到父级上，触发执行效果。这样做的好处当然就是提高性能了.
如果说我们可能有很多个li用for循环的话就比较影响性能。下面我们可以用事件委托的方式来实现这样的效果。
&head lang="en"&
&meta charset="UTF-8"&
&title&&/title&
&script type="text/javascript"&
window.onload = function () {
var aUl = document.getElementsById("bubble");
var aLi = aUl.getElementsByTagName("li");
//不管在哪个事件中，只要你操作的那个元素就是事件源。
// ie：window.event.srcElement
// 标准下:event.target
aUl.onmouseover = function (ev) {
var ev = ev || window.
var target = ev.target || ev.srcE
if(target.nodeName.toLowerCase() == "li"){
target.style.background = "blue";
aUl.onmouseout = function (ev) {
var ev = ev || window.
var target = ev.target || ev.srcE
if(target.nodeName.toLowerCase() = "li"){
target.style.background = "";
&ul id = "bubble"&
&li&1&/li&
&li&2&/li&
&li&3&/li&
&li&4&/li&
&div onclick="showMsg(this,event)" id="outSide" style="width:100 height:100 background:#000; padding:50px"&
&div onclick="showMsg(this,event)" id="inSide" style="width:100 height:100 background:#CCC"&&/div&
&script type="text/javascript"&
//阻止事件冒泡后，你点击灰色盒子，整个过程只弹一次对话框了（注意与默认情况对比）
function showMsg(obj,e)
alert(obj.id);
stopBubble(e)
//阻止事件冒泡函数
function stopBubble(e)
if (e && e.stopPropagation)
e.stopPropagation()
window.event.cancelBubble=true
阅读(...) 评论()javascript冒泡事件的意义及如何阻止冒泡事件
JavaSciprt事件中有两个很重要的特性：事件冒泡以及目标元素。
当一个元素上的事件被触发的时候，比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡；这个事件从原始元素开始一直冒泡到DOM树的最上层。
任何一个事件的目标元素都是最开始的那个元素，在我们的这个例子中也就是按钮，并且它在我们的元素对象中以属性的形式出现。使用事件代理的话我们可以把事件处理器添加到一个元素上，等待一个事件从它的子级元素里冒泡上来，并且可以很方便地得知这个事件是从哪个元素开始的。
事件的冒泡和捕获
捕获是从上级元素到下级元素，冒泡是从下级元素到上级元素。
在IE中，每个元素和window对象都有两个方法：attachEvent()和detachEvent()。attachEvent()用来给一个事件附加事件处理函数。而detachEvent()用来将事件处理函数分离出来。
var&fnClick
=&function()
alert(&Clicked!&);
= document.getElementById(&div1&);
oDiv.attachEvent(&onclick&,
oDiv.detachEvent(&onclick&,
事件的冒泡有什么好处
想象一下现在我们有一个10列、100行的HTML表格，你希望在用户点击表格中的某一单元格的时候做点什么。比如说我有一次就需要让表格中的每一个单元格在被点击的时候变成可编辑状态。如果把事件处理器加到这1000个单元格会产生一个很大的性能问题，并且有可能导致内存泄露甚至是浏览器的崩溃。相反地，使用事件代理的话，你只需要把一个事件处理器添加到table元素上就可以了，这个函数可以把点击事件给截下来，并且判断出是哪个单元格被点击了。
代码很简单，我们所要关心的只是如何检测目标元素而已。比方说我们有一个 table元素，ID是“report”，我们为这个表格添加一个事件处理器以调用editCell函数。editCell函数需要判断出传到table 来的事件的目标元素。考虑到我们要写的几个函数中都有可能用到这一功能，所以我们把它单独放到一个名为getEventTarget的函数中：
function&getEventTarget(e)
= e || window.
&&&return&e.target
e这个变量表示的是一个事件对象，我们只需要写一点点跨浏览器的代码来返回目标元素，在IE里目标元素放在srcElemtn属性或event.toElement属性中，而在其它浏览器里则是target或event.relatedTarget属性。
接下来就是editCell函数了，这个函数调用到了 getEventTarget函数。一旦我们得到了目标元素之后，剩下的事情就是看看它是否是我们所需要的那个元素了。
function&editCell(e)
&&&var&target
= getEventTarget(e);
&&&if(target.tagName.toLowerCase()
在editCell函数中，我们通过检查目标元素标签名称的方法来确定它是否是一个表格的单元格。这种检查也许过于简单了点；如果它是这个目标元素单元格里的另一个元素呢？我们需要为代码做一点小小的修改以便于其找出父级的td 元素。如果说有些单元格不需要被编辑怎么办呢？此种情况下我们可以为那些不可编辑的单元格添加一个指定的样式名称，然后在把单元格变成可编辑状态之前先检查它是否不包含那个样式名称。选择总是多样化的，你只需找到适合你应用程序的那一种。
事件冒泡的优点和缺点
那些需要创建的以及驻留在内存中的事件处理器少了。这是很重要的一点，这样我们就提高了性能，并降低了崩溃的风险。
在DOM更新后无须重新绑定事件处理器了。如果你的页面是动态生成的，比如说通过Ajax，你不再需要在元素被载入或者卸载的时候来添加或者删除事件处理器了。
潜在的问题也许并不那么明显，但是一旦你注意到这些问题，你就可以轻松地避免它们：你的事件管理代码有成为性能瓶颈的风险，所以尽量使它能够短小精悍。
不是所有的事件都能冒泡
blur、focus、load和unload不能像其它事件一样冒泡。事实上blur和focus可以用事件捕获而非事件冒泡的方法获得（在IE之外的其它浏览器中）。
需要注意的是：如果你的代码处理mousemove事件的话你遇上性能瓶颈的风险可就大了，因为mousemove事件触发非常频繁。而mouseout则因为其怪异的表现而变得很难用事件代理来管理。
避免事件冒泡
在IE下解决问题很简单，用onMouseEnter、 onMouseLeave来代替onMouseOver、onMouseOut就行了，他们的作用基本相同，前者不会发生冒泡。但是 firefox下没有这两个事件.
window.event.cancelBubble
=&true&(IE)&&
event.stopPropagation()& event.preventDefault() (Firefox)
在IE和FF浏览器内阻止冒泡行为是不同的。IE中使用cancelBubble，FF中使用stopPropation()。
&title&阻止冒泡&/title&
color:#333;
font-size:12 }
&p&什么是事件冒泡,通俗的来讲就是
我们为页面内body添加一个单击事件,同样再为页面内li元素添加一个单击事件..当你单击li的时候.&br&
body的事件也会被触发.....因为li被包含在body元素内...你单击了li同时也单击了body...这就是事件冒泡....&br
在有些时候.我们要阻止这种情况发生...也就是单击li事件.不会触发body的事件....
这就叫阻止冒泡!
id=&lia&&请单击下面的列表.会触发body事件
&&&&&&&&&li&项目1&/li&
&&&&&&&&&li&项目2&/li&
&&&&&&&&&li&项目3&/li&
id=&lib&&请单下面的列表.不会触发body事件.
&&&&&&&&&li&项目1&/li&
&&&&&&&&&li&项目2&/li&
&&&&&&&&&li&项目3&/li&
language=&javascript&&
document.body.onclick
=&function(){
&&&&alert(&BODY事件&);
function&att_Event(){
&&&&var&li
= document.getElementById(&lia&).getElementsByTagName(&li&);
&&&&for(var&i=0;i&li.i++){
&&&&&&&&li[i].onclick
=&function(){
&&&&&&&&&&&&alert(&Li事件&);
function&att_Event_b(){
&&&&var&li
= document.getElementById(&lib&).getElementsByTagName(&li&);
&&&&for(var&i=0;i&li.i++){
&&&&&&&&li[i].onclick
=&function(e){
&&&&&&&&&&&&alert(&Li事件&);
&&&&&&&&&&&&stopBubble(e);&
function&stopBubble(e){
&& e.stopPropagation){
&&&&&&&&e.stopPropagation();
&&&&&&&&window.event.cancelBubble
window.onload
=&function(){
&&&&att_Event();
&&&&att_Event_b();
阻止jQuery事件冒泡
jQuery对DOM的事件触发具有冒泡特性。有时利用这一特性可以减少重复代码，但有时候我们又不希望事件冒泡。这个时候就要阻止 jQuery.Event冒泡。
在jQuery.Event的文档中的开头得知，jQuery.Event对象是符合W3C标准的一个事件对象，同时jQuery.Event免去了检查兼容IE的步骤。
jQuery.Event提供了一个非常简单的方法来阻止事件冒泡：event.stopPropagation();
$(&p&).click(function(event){
&&&&&event.stopPropagation();
但是这个方法对使用live绑定的事件没有作用，需要一个更简单的方法阻止事件冒泡：
$(this).after(&Another
paragraph!&);
&&&&return&false;&
看过本文的人也看了：
我要留言技术领域：
取消收藏确定要取消收藏吗？
删除图谱提示你保存在该图谱下的知识内容也会被删除，建议你先将内容移到其他图谱中。你确定要删除知识图谱及其内容吗？
删除节点提示无法删除该知识节点，因该节点下仍保存有相关知识内容！
删除节点提示你确定要删除该知识节点吗？浅谈javascript中的事件冒泡和事件捕获
转载 & & 作者：依然仰望
本文主要介绍了javascript中的事件冒泡和事件捕获，具有一定的参考价值，下面跟着小编一起来看下吧
1.事件冒泡　　
IE 的事件流叫做事件冒泡（event bubbling），即事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点（文档）。以下面的HTML 页面为例：
&!DOCTYPE html&
&title&Event Bubbling Example&/title&
&div id="myDiv"&Click Me&/div&
如果你单击了页面中的&div&元素，那么这个click 事件会按照如下顺序传播：
(2) &body&
(3) &html&
(4) document
也就是说，click 事件首先在&div&元素上发生，而这个元素就是我们单击的元素。然后，click事件沿DOM树向上传播，在每一级节点上都会发生，直至传播到document 对象。图13-1 展示了事件冒泡的过程。
所有现代浏览器都支持事件冒泡，但在具体实现上还是有一些差别。IE5.5 及更早版本中的事件冒泡会跳过&html&元素（从&body&直接跳到document）。IE9、Firefox、Chrome 和Safari 则将事件一直冒泡到window 对象。
2.事件捕获
Netscape Communicator 团队提出的另一种事件流叫做事件捕获（event capturing）。事件捕获的思想是不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收到事件。事件捕获的用意在于在事件到达预定目标之前捕获它。如果仍以前面的HTML 页面作为演示事件捕获的例子，那么单击&div&元素就会以下列顺序触发click 事件。
(1) document
(2) &html&
(3) &body&
在事件捕获过程中，document 对象首先接收到click 事件，然后事件沿DOM 树依次向下，一直传播到事件的实际目标，即&div&元素。
虽然事件捕获是Netscape Communicator 唯一支持的事件流模型，但IE9、Safari、Chrome、Opera和Firefox 目前也都支持这种事件流模型。
由于老版本的浏览器不支持，因此很少有人使用事件捕获。我们也建议读者放心地使用事件冒泡，在有特殊需要时再使用事件捕获。
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
W3C模型是将两者进行中和，在W3C模型中，任何事件发生时，先从顶层开始进行事件捕获，直到事件触发到达了事件源元素。然后，再从事件源往上进行事件冒泡，直到到达document。 这句话怎么理解？
通过W3C的方式，ele.addEventListener('click',doSomething,true/false)
第三个参数中：false为冒泡获取，true为捕获获取，不都设定好了具体事件方式了吗？为什么还有中和的解释？？？
&div id='one'&
&div id='two'&
&div id='three'&
&div id='four'&
var one = document.getElementById('one');
var two = document.getElementById('two');
var three = document.getElementById('three');
var four = document.getElementById('four');
one.addEventListener('click', function() {
console.log('one');
}, false);
two.addEventListener('click', function() {
console.log('two');
three.addEventListener('click', function() {
console.log('three');
}, false);
four.addEventListener('click', function() {
console.log('four');
}, false);
上面四个嵌套的div，除了第二个two是设置的捕获，另外三个都是冒泡，结果是two-four-three-one，有点绕晕了，是捕获事件的优先级高于冒泡事件吗？这和我的问题一的那句话一个道理吗？
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
第一个问题：就是事件冒泡的定义！比如你的例子中一旦事件冒泡，会先找从触发节点从下往上到最顶层的dom，触发冒泡事件，所以顺序是four-&three-&two-&one
第二个问题：你在给two的addEventListener参数三设置了true捕获事件，所以two会先触发click，然后再从其他三个冒泡的顺序自然执行，相当于two捕获-》four冒泡-》three冒泡-&one
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。}