JQuery自動觸發(fā)事件的方法
本文實例講述了JQuery自動觸發(fā)事件的方法。分享給大家供大家參考。具體如下:
常用模擬
有時候,需要通過模擬用戶操作,來達到單擊的效果。例如在用戶進入頁面后,就觸發(fā)click事件,而不需要用戶去主動單擊。
在JQuery中,可以使用trigger()方法完成模擬操作。例如可以使用下面的代碼來觸發(fā)id為btn的按鈕的click事件。
$('#btn').trigger("click");
這樣,當(dāng)頁面加載完畢后,就會立刻輸出想要的效果。也可以直接簡寫click(),來達到同樣的效果:
$('#btn').click();
觸發(fā)自定義事件
trigger()方法不僅能觸發(fā)瀏覽器支持的具有相同名稱的事件,也可以觸發(fā)自定義名稱的事件。例如為元素綁定一個“myClick”的事件,JQuery代碼如下:
$('#btn').bind("myClick", function(){ $('#test').append("<p>我的自定義事件.</p>"); });
想要觸發(fā)這個事件,可以使用以下代碼來實現(xiàn):
$('#btn').trigger("myClick");
傳遞數(shù)據(jù)
trigger(type[,data])方法有兩個參數(shù),第1個參數(shù)是要觸發(fā)的事件類型,第2個參數(shù)是要傳遞給事件處理函數(shù)的附加數(shù)據(jù),以數(shù)組形式傳遞。通??梢酝ㄟ^傳遞一個參數(shù)給回調(diào)函數(shù)來區(qū)別這次事件是代碼觸發(fā)的還是用戶觸發(fā)的。
下面是一個傳遞數(shù)據(jù)的例子。
$(function(){ $('#btn').bind("myClick", function(event, message1, message2){ $('#test').append( "<p>"+message1 + message2 +"</p>"); }); $('#btn').click(function(){ $(this).trigger("myClick",["我的自定義","事件"]); }).trigger("myClick",["我的自定義","事件"]); })
執(zhí)行默認操作
trigger()方法觸發(fā)事件后,會執(zhí)行瀏覽器默認操作。例如:
$("input").trigger("focus");
以上代碼不僅會觸發(fā)為<input>元素綁定的focus事件,也會使<input>元素本身得到焦點(這是瀏覽器的默認操作)。
如果只想觸發(fā)綁定的focus事件,而不想執(zhí)行瀏覽器默認操作,可以使用jQuery中另一個類似的方法——triggerHandler()方法。
$("input").triggerHandler("focus");
該方法會觸發(fā)<input>元素上綁定的特定事件,同時取消瀏覽器對此事件的默認操作,即文本框只觸發(fā)綁定的focus事件,不會得到焦點。
希望本文所述對大家的jQuery程序設(shè)計有所幫助。
- jQuery實現(xiàn)長按按鈕觸發(fā)事件的方法
- JQuery文本改變觸發(fā)事件如聚焦事件、失焦事件
- jQuery如何使用自動觸發(fā)事件trigger
- jquery 查找select ,并觸發(fā)事件的實現(xiàn)代碼
- jquery實現(xiàn)回車鍵觸發(fā)事件(實例講解)
- jquery實現(xiàn)按Enter鍵觸發(fā)事件示例
- JQuery觸發(fā)事件例如click
- jquery實現(xiàn)輸入框?qū)崟r輸入觸發(fā)事件代碼
- jquery選擇器排除某個DOM元素的方法(實例演示)
- jQuery 刪除/替換DOM元素的幾種方式
- jquery獲取并修改觸發(fā)事件的DOM元素示例【基于target 屬性】
相關(guān)文章
jquery實現(xiàn)可自動收縮的TAB網(wǎng)頁選項卡代碼
這篇文章主要介紹了jquery實現(xiàn)可自動收縮的TAB網(wǎng)頁選項卡代碼,涉及jquery鼠標事件及頁面元素樣式變換的實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09jQuery插件jPaginate實現(xiàn)無刷新分頁
我改了下源碼基本可以在ie7,ie8,ie9正常顯示。以下是部分源碼。發(fā)現(xiàn)用別人的東西出了問題很難搞啊。關(guān)鍵是那個ie啊。2015-05-05jQuery里filter()函數(shù)與find()函數(shù)用法分析
這篇文章主要介紹了jQuery里filter()函數(shù)與find()函數(shù)用法,實例對比分析了filter()函數(shù)與find()函數(shù)的功能與相關(guān)使用技巧,需要的朋友可以參考下2015-06-06jQuery插件HighCharts實現(xiàn)的2D對數(shù)餅圖效果示例【附demo源碼下載】
這篇文章主要介紹了jQuery插件HighCharts實現(xiàn)的2D對數(shù)餅圖效果,結(jié)合實例形式分析了jQuery圖形插件HighCharts繪制2D對數(shù)餅圖的具體實現(xiàn)步驟與相關(guān)操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03jQuery 利用ztree實現(xiàn)樹形表格的實例代碼
最近公司要做一個樹形表格,由于之前對ztree實現(xiàn)基本的樹形結(jié)構(gòu),所以想到用ztree來做,下面小編給大家分享實現(xiàn)代碼,感興趣的朋友一起看看吧2017-09-09jQuery實現(xiàn)花式輪播之圣誕節(jié)禮物傳送效果
這篇文章主要介紹了jQuery實現(xiàn)花式輪播之圣誕節(jié)禮物傳送效果,需要的朋友可以參考下2016-12-12jQuery.position()方法獲取不到值的安全替換方法
這篇文章主要介紹了jQuery.position()方法獲取不到值的安全替換方法,本文給出了一種變通的方法,用.offset()來換算,需要的朋友可以參考下2015-03-03