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，為阻止后續包括默認點擊事件和冒泡事件的所有事件，但不阻止綁定在該元素上的其他事件。
這里注意一下，如果是直接onclick方法中return false，則不能阻止事件冒泡，只能阻止默認事件。
3、event.stopPropagation();
事件處理過程中，阻止了事件冒泡，但不會阻擊默認行為（如執行了超鏈接的跳轉），也不阻止綁定在該元素上的其他事件。
4、event.preventDefault();
事件處理過程中，不阻擊事件冒泡，不阻止綁定在該元素上的其他事件，但阻擊默認行為（它只執行所有彈框，卻沒有執行超鏈接跳轉）
5、event.stopImmediatePropagation()
阻止其他事件處理程序被調用，阻止該元素的次優先級程序及所有冒泡事件，但不阻止默認行為。
6、上面
事件目標：純javascript屬性event.target 事件粗粒程序的變量event保存着事件對象。而event.target屬性保存着發生事件的目標元素。這個屬性DOM API中規定的，但是沒有被所有瀏覽器實現。jQuery對這個事件對象進行了必要的擴展，從而在任何瀏覽器中都能夠使用這個屬性。通過.target,可以確定DOM中首先接收到事件的元素（即被實際單擊的元素）。而且，我們知道this應用的是處理事件的DOM元素，所以可以編寫下列代碼： $(document).ready(function(){ $(‘#switcher’).click(function(event){ if(event.target == this){ $(‘#switcher .button’).toggleClass(‘hidden‘); } }); }); 此時的代碼確保了被單擊的元素是<div id=”switcher”>，而不是其它后代元素。 XML DOM target 事件屬性 定義和用法 target 事件屬性可返回事件的目標節點（觸發該事件的節點），如生成事件的元素、文檔或窗口。 語法 event.target
模仿事件操作
返回值:jQuery trigger(type, [data])
在每一個匹配的元素上觸發某類事件。
這個函數也會導致瀏覽器同名的默認行為的執行（除了a標簽的跳轉事件）。比如，如果用trigger()觸發一個'submit'，則同樣會導致瀏覽器提交表單。如果要阻止這種默認行為，應返回false。
參數
typeString,Event,Object
一個事件對象或者要觸發的事件類型
data (可選)Array
(可選)傳遞給事件處理函數的附加參數
示例
描述:
提交第一個表單，但不用submit()
jQuery 代碼:
$("form:first").trigger("submit")
描述:
給一個事件傳遞參數(click()同樣觸發默認事件)
jQuery 代碼:
$("p").click(function (event, a, b) {
// 一個普通的點擊事件時，a和b是undefined類型
// 如果用下面的語句觸發，那么a指向"foo",而b指向"bar"
}).trigger("click", ["foo", "bar"]);
描述:
下面的代碼可以顯示一個"Hello World"
jQuery 代碼:
$("p").bind("myEvent",function (event, message1, message2) {
alert(message1 + ' ' + message2);
});
$("p").trigger("myEvent",["Hello","World!"]);
三、unbind，off（推薦）用於解除綁定事件，但是解除不了標簽中的onclick屬性事件和默認點擊事件，要取消，則要返回false。
且unbind與off是可以使用事件觸發傳入的event對象來取消時間綁定，用於觸發多少次就不再觸發（若想觸發一次不再觸發，則可使用one()來綁定事件）
$(document).ready(function(){ var x=0; $("p").click(function(event){ $("p").animate({fontSize:"+=5px"}); x++; if (x>=2) { $(this).unbind(event); } }); });