生活随笔
收集整理的這篇文章主要介紹了
JQuery 自动触发事件
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
常用模擬
有時候,需要通過模擬用戶操作,來達到單擊的效果。例如在用戶進入頁面后,就觸發(fā)click事件,而不需要用戶去主動單擊。
在JQuery中,可以使用trigger()方法完成模擬操作。例如可以使用下面的代碼來觸發(fā)id為btn的按鈕的click事件。
| 1 | $('#btn').trigger("click"); |
這樣,當(dāng)頁面加載完畢后,就會立刻輸出想要的效果。也可以直接簡寫click(),來達到同樣的效果:
觸發(fā)自定義事件
trigger()方法不僅能觸發(fā)瀏覽器支持的具有相同名稱的事件,也可以觸發(fā)自定義名稱的事件。例如為元素綁定一個“myClick”的事件,JQuery代碼如下:
| 1 | $('#btn').bind("myClick",?function(){?? |
| 2 | ?????$('#test').append("<p>我的自定義事件.</p>");?? |
想要觸發(fā)這個事件,可以使用以下代碼來實現(xiàn):
| 1 | $('#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ù)的例子。
| 2 | ???$('#btn').bind("myClick",?function(event, message1, message2){?? |
| 3 | ?????????????????$('#test').append(?"<p>"+message1 + message2 +"</p>");?? |
| 5 | ???$('#btn').click(function(){?? |
| 6 | ????????$(this).trigger("myClick",["我的自定義","事件"]);?? |
| 7 | ???}).trigger("myClick",["我的自定義","事件"]);?? |
執(zhí)行默認操作
trigger()方法觸發(fā)事件后,會執(zhí)行瀏覽器默認操作。例如:
| 1 | $("input").trigger("focus"); |
以上代碼不僅會觸發(fā)為<input>元素綁定的focus事件,也會使<input>元素本身得到焦點(這是瀏覽器的默認操作)。
如果只想觸發(fā)綁定的focus事件,而不想執(zhí)行瀏覽器默認操作,可以使用jQuery中另一個類似的方法——triggerHandler()方法。
| 1 | $("input").triggerHandler("focus"); |
該方法會觸發(fā)<input>元素上綁定的特定事件,同時取消瀏覽器對此事件的默認操作,即文本框只觸發(fā)綁定的focus事件,不會得到焦點。
總結(jié)
以上是生活随笔為你收集整理的JQuery 自动触发事件的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯,歡迎將生活随笔推薦給好友。