html標簽是有子和父的，這個時候就出現了事件觸發順序的問題，比如：
<!DOCTYPE html>
<html>
<head>
<style>
.first{
border:solid #FF0000
}
.second{
border:solid #00FF00
}
.third{
border:solid #0000FF
}
</style>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$(".first").click(function(){
alert(0);
});
$(".second").click(function(){
alert(1);
});
$(".third").click(function(){
alert(2);
});
});
</script>
</head>
<body>
<div class="first">
testFirst
<div class="second">
testSecond
<div class="third">
testThird
</div>
</div>
</div>
</body>
</html>
默認情況下，點third，三個事件都會觸發，觸發順序為3,2,1.這種方式叫做冒泡觸發。
一、使用javascript設置觸發方式
可以使用javascript:DOM.addEventListener()方法添加時設置
element.addEventListener(event, function, useCapture);第三個參數為boolean，false的時候冒泡觸發(默認值，從最下級的事件開始觸發)，true的時候為捕獲觸發（從最上級元素的時間開始觸發）。
事件傳遞有兩種方式：冒泡與捕獲。
事件傳遞定義了元素事件觸發的順序。 如果你將 <p> 元素插入到 <div> 元素中，用戶點擊 <p> 元素, 哪個元素的 "click" 事件先被觸發呢？
在 冒泡 中，內部元素的事件會先被觸發，然後再觸發外部元素，即： <p> 元素的點擊事件先觸發，然後會觸發 <div> 元素的點擊事件。
在 捕獲 中，外部元素的事件會先被觸發，然後才會觸發內部元素的事件，即： <div> 元素的點擊事件先觸發 ，然後再觸發 <p> 元素的點擊事件。
二、使用jQuery設置事件觸發方式
1、調用$(selector).on(event,childSelector,data,function,map)綁定時間，可以設置childSelector，意思是只為子元素中的一部分綁定該事件，可以篩選出一部分來綁定，也可以達到效果。
2、$("#hr_three").click(function(event){
return false;
});
傳入參數event，return false，為阻止後續所有時間，包括默認點擊事件和冒泡時間。
3、event.stopPropagation();
事件處理過程中，阻止了事件冒泡，但不會阻擊默認行為（如執行了超鏈接的跳轉）
4、event.preventDefault();
事件處理過程中，不阻擊事件冒泡，但阻擊默認行為（它只執行所有彈框，卻沒有執行超鏈接跳轉）