<div id="div1" style="border:1px solid #09f;height:300px;width:200px" >外面的
<div id="div2" style="border:1px solid #09f;height:200px;width:150px">里面的</div></div>
<script type="text/javascript">
var $=function(){return document.getElementById(arguments[0])};
var msg=function() {
alert(this.innerHTML);
}
var isCapture=false;//将这里再换成true，点里面的div试试
$("div1").addEventListener("click",msg,isCapture);
$("div2").addEventListener("click",msg,isCapture);
</script>

------解决方案--------------------
当然要在Firefox等标准浏览器上

------解决方案--------------------
看弹出消息的顺序

------解决方案--------------------
DOM标准是捕获与冒泡“同时”支持，而IE里面只支持冒泡
DOM标准支持的浏览器（Firefox） addEventListener(eventName, fn, isCapture);可以添加事件监听
第一个参数是事件名称，不带‘on’,比如 ‘click’
第二个参数是事件处理函数
第三个参数，true 表示是捕获事件流，false 表示是冒泡事件流
-----------------------
document.getElementById('text1').onclick = function() {alert('hello') ;};
像这样如果你是直接赋值给DOM元素的，在DOM标准支持的浏览器（Firefox）中默认是添加到冒泡事件流，
IE中只支持冒泡，所以你只会看到冒泡