阻止冒泡是为了什么？腾讯的面试题还是搞不懂

[jocelyn_vampire]

要求：给table加上事件委托，如果在td上点击，td上面的背景颜色就变成红色。
可是问题来的，在td上点击的时候，onclick事件是不是会传到<tr>上呢，那是不是需要阻止冒泡呢?
面试官告诉我有一个阻止冒泡的方法是topPropagation，但是，我觉得用下面的方法也可以，那么为什么要阻止冒泡呢？
求大神解释。

function changeToRed1(e){
	var eve=e||window.event;
	var target=e.target||e.srcElement;
	if(target.nodeName=="TD")
	{
		target.style.cssText+=';background:yellow;';
	}	
}

[luhuiming741cs]

TD在TR里面，点击TD是不是可以说也点击TR，这就是冒泡

[娃都会打酱油了]

如果父节点没任何对应处理事件的话，那就没必要阻止冒泡……如果有了，比如点击直接跳转了，那不就坑了

[hch126163]

如果body 有点击事件。没有阻止冒泡。会触发body的点击事件。

[斯洛文尼亚旅游]

看你事件绑定到哪个对象上了，你tr也绑定了事件，td也绑定了事件，点击td如果不阻止冒泡，tr的也会执行，因为点击td实际也点击了tr，td是tr的子元素，同理td的所有祖先元素有事件的都会执行，如table，body等祖先元素

[forwardNow]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #outer {width: 200px; height: 200px; background-color: green; }
        #inner {width: 100px; height: 100px; background-color: gray; }
    </style>
</head>
<body>
<!-- 
参考：http://www.jb51.net/article/42492.htm
摘要：
    （1）冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。
        IE 5.5: div -> body -> document
        IE 6.0: div -> body -> html -> document
        Mozilla 1.0: div -> body -> html -> document -> window
    （2）捕获型事件(event capturing)：事件从最不精确的对象(document 对象)开始触发，然后到最精确(也可以在窗口级别捕获事件，不过必须由开发人员特别指定)。
    （3）DOM事件流：同时支持两种事件模型：捕获型事件和冒泡型事件，但是，捕获型事件先发生。两种事件流会触及DOM中的所有对象，从document对象开始，也在document对象结束。
-->

    <div id="outer">
        <div id="inner">
        </div>
    </div>

    <script>
        outer.onclick = function () {
            alert("outer");
        }

        inner.onclick = function ( e ) {
            alert("inner");
            /* 
            // 阻止冒泡
            e = e || window.event;  
            if (e.stopPropagation) {
                e.stopPropagation();  
            } else if (window.event) {  
                e.cancelBubble = true;  
            }
            */
        }
    </script>

</body>
</html>

[jocelyn_vampire]

我后来搞懂了，之前一直把冒泡理解错了，以为事件的冒泡是说当冒泡到所点击的元素（target）的时候就会执行回调函数，实际上回调函数是在事件冒泡到添加句柄的元素的时候才执行的，意思是在table上加了事件委托来检测td时，在td上点击的时候，事件会向上冒泡，即td，tr，table一直到document，而回调函数是在冒泡到table的时候才执行的，那么如果是在回调函数中阻止冒泡，就是阻止从body一直到document的click事件的传播。当在body或更高层元素中加了监听事件的时候，该监听事件就不会因为我点击了td而调用，是如果我想要阻止这样的行为，才需要stopPropagation的。 希望这次没理解错，求纠正。。。。