Jquery dom 事件冒泡处理
1. 什么是冒泡
在页面上可以有多个事件，也可以多个元素响应同一个事件.for example:
<tr>
<td>
<a ../>
</td>
</tr>
当事件发生时,会首先发送给最具体的元素，在这个元素获得响应机会之后，事件会向上冒泡到其他外层元素。在我们的例子中，<a>会首先处理事件，然后按照顺序依次是<td>和<tr>.
2. 事件冒泡的副作用
假设例子中的所有元素都被绑定了click事件。
<script type="text/javascript">$(function(){ // 为a元素绑定click事件 $('a').bind("click",function(){ var txt = $('#msg').html() + "<p>内层a元素被点击.<p/>"; $('#msg').html(txt); }); // 为td元素绑定click事件 $('td').bind("click",function(){ var txt = $('#msg').html() + "<p>外层td元素被点击.<p/>"; $('#msg').html(txt); }); // 为tr元素绑定click事件 $("tr").bind("click",function(){ var txt = $('#msg').html() + "<p>tr元素被点击.<p/>"; $('#msg').html(txt); });})</script><script type="text/javascript">$(function(){ // 为a元素绑定click事件 $('a').bind("click",function(event){ var txt = $('#msg').html() + "<p>内层a元素被点击.<p/>"; $('#msg').html(txt); if (window.event) { event.cancelBubble = true; //ie } else { event.stopPropagation(); //firefox } }); // 为td元素绑定click事件 $('td').bind("click",function(event){ var txt = $('#msg').html() + "<p>外层td元素被点击.<p/>"; $('#msg').html(txt); if (window.event) { event.cancelBubble = true; //ie } else { event.stopPropagation(); //firefox } }); // 为tr元素绑定click事件 $("tr").bind("click",function(event){ var txt = $('#msg').html() + "<p>tr元素被点击.<p/>"; $('#msg').html(txt); if (window.event) { event.cancelBubble = true; //ie } else { event.stopPropagation(); //firefox } });})</script>