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");

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM