自定義事件 (jQuery)

1jQuery自定義事件之trigger事件

衆所周知相似於mousedown、click、keydown等等這類型的事件都是瀏覽器提供的，通俗叫原生事件，這類型的事件是須要有交互行爲才能被觸發。

在jQuery經過on方法綁定一個原生事件

$('#elem').on('click', function() {
    alert("觸發系統事件")
 });

alert須要執行的條件：必須有用戶點擊才能夠。若是不一樣用戶交互是否能在某一時刻自動觸發該事件呢？ 正常來講是不能夠的，可是jQuery解決了這個問題，提供了一個trigger方法來觸發瀏覽器事件

因此咱們能夠這樣：

$('#elem').trigger('click');

在綁定on的事件元素上，經過trigger方法就能夠調用到alert了，挺簡單！

再來看看.trigger是什麼？

簡單來說就是：根據綁定到匹配元素的給定的事件類型執行全部的處理程序和行爲

trigger除了可以觸發瀏覽器事件，同時還支持自定義事件，而且自定義時間還支持傳遞參數

$('#elem').on('Aaron', function(event,arg1,arg2) {
    alert("自觸自定義時間")
 });
$('#elem').trigger('Aaron',['參數1','參數2'])

trigger觸發瀏覽器事件與自定義事件區別？

• 自定義事件對象，是jQuery模擬原生實現的
• 自定義事件能夠傳遞參數

2jQuery自定義事件之triggerHandler事件

trigger事件還有一個特性：會在DOM樹上冒泡，因此若是要阻止冒泡就須要在事件處理程序中返回false或調用事件對象中的.stopPropagation() 方法可使事件中止冒泡

trigger事件是具備觸發原生與自定義能力的，可是存在一個不可避免的問題： 事件對象event沒法完美的實現，畢竟一個是瀏覽器給的，一個是本身模擬的。儘管 .trigger() 模擬事件對象，可是它並無完美的複製天然發生的事件，若要觸發經過 jQuery 綁定的事件處理函數，而不觸發原生的事件，使用.triggerHandler() 來代替

triggerHandler與trigger的用法是同樣的，重點看不一樣之處：

• triggerHandler不會觸發瀏覽器的默認行爲，.triggerHandler( "submit" )將不會調用表單上的.submit()
• .trigger() 會影響全部與 jQuery 對象相匹配的元素，而 .triggerHandler() 僅影響第一個匹配到的元素
• 使用 .triggerHandler() 觸發的事件，並不會在 DOM 樹中向上冒泡。 若是它們不是由目標元素直接觸發的，那麼它就不會進行任何處理
• 與普通的方法返回 jQuery 對象(這樣就可以使用鏈式用法)相反，.triggerHandler() 返回最後一個處理的事件的返回值。若是沒有觸發任何事件，會返回 undefined