jQuery 高級事件（模擬操做）

一.模擬操做

在事件觸發的時候，有時咱們須要一些模擬用戶行爲的操做。例如：當網頁加載完畢後 自行點擊一個按鈕觸發一個事件，而不是用戶去點擊

//點擊按鈕事件

$('input').click(function(){

alert('個人第一次點擊來自模擬！');

});

//模擬用戶點擊行爲

$('input').trigger('click');

//能夠合併兩個方法

$('input').click(function(){

alert('個人第一次點擊來自模擬！');

}).trigger('click');

有時在模擬用戶行爲的時候，咱們須要給事件執行傳遞參數，這個參數相似與 `event.data` 的額外數據，能夠能夠是數字、字符串、數組、對象。 

$('input').click(function(e,data1,data2){

alert(data1+','+data2);

}).trigger('click',['abc','123']);

注意：當傳遞一個值的時候，直接傳遞便可。當兩個值以上，須要在先後用中括號包含 起來。但不能認爲是數組形式，下面給出一個複雜的說明。 

$('input').click(function(e,data1,data2){

alert(data1.a+',' +data2[1]);

}).trigger('click',[{'a' :'1','b':'2'},['123','456']]);

 

除了經過 JavaScript 事件名觸發，也能夠經過自定義的事件觸發，所謂自定義事件其實 就是一個被.bind()綁定的任意函數。

$('input').bind('myEvent',function(){

alert('自定義事件！');

}).trigger('myEvent');

 

.trigger()方法提供了簡寫方案，只要想讓某個事件執行模擬用戶行爲，直接再調用一個 空的同名事件便可。

$('input').click(function(){

alert('個人第一次點擊來自模擬！');

}).click(); //空的 click()執行的是 trigger()

這種便捷的方法，jQuery 幾乎個全部經常使用的事件都提供了。

jQuery 還提供了另一個模擬用戶行爲的方法：`.triggerHandler()`；這個方法的使用 和.trigger()方法同樣。

$('input').click(function(){

alert('個人第一次點擊來自模擬！');

}).triggerHandler('click');

 

在常規的使用狀況下，二者幾乎沒有區別，都是模擬用戶行爲，也能夠能夠傳遞額外參數。但在某些特殊狀況下，就產生了差別：

1.`.triggerHandler()`方法並不會觸發事件的默認行爲，而`.trigger()`會。

$('form').trigger('submit'); //模擬用戶執行提交，並跳轉到執行頁面

$('form').triggerHandler('submit'); //模擬用戶執行提交，並阻止的默認行爲

若是咱們但願使用.trigger()來模擬用戶提交，而且阻止事件的默認行爲，則須要這麼寫：

$('form').submit(function(e){

e.preventDefault(); //阻止默認行爲

}).trigger('submit');

2.`.triggerHandler()`方法只會影響第一個匹配到的元素，而`.trigger()`會影響全部。

3.`.triggerHandler()`方法會返回當前事件執行的返回值，若是沒有返回值，則返回 `undefined`；而`.trigger()`則返回當前包含事件觸發元素的 jQuery 對象(方便鏈式連綴調用)。

alert($('input').click(function(){
return 123;
}).triggerHandler('click')); //返回 123，沒有 return 返回

4.`.trigger()`在建立事件的時候，會冒泡。但這種冒泡是自定義事件才能體現出來，是 jQuery 擴展於 DOM 的機制，並不是 DOM 特性。而`.triggerHandler()`不會冒泡。 

var index=1;

$('div').bind('myEvent',function(){

alert('自定義事件'+index);

index++;

});

$('.div3').trigger("myEvent");