jQuery如何使用自動觸發(fā)事件trigger

更新時間：2015年11月29日 10:02:37 作者：麥田

這篇文章主要介紹了jQuery如何使用自動觸發(fā)事件trigger，需要的朋友可以參考下

有時候，需要通過模擬用戶操作，來達到點擊的效果，例如用戶進入頁面后
就觸發(fā)click事件，而無需主動點擊。

比如以下代碼：

<body>
  <a href="#" onclick="javascript:document.getElementById('d').innerHTML='x1'">點擊1</a>
  <a href="#" onclick="javascript:document.getElementById('d').innerHTML='x2'">點擊2</a>
  <a href="#" onclick="javascript:document.getElementById('d').innerHTML='x3'">點擊3</a>
  </br>
  <span id="d"></span>
</body>

實現(xiàn)效果為'點擊1'頁面上將顯示x1 ,'點擊2'頁面上顯示x2 …
但需要實現(xiàn)首次進入頁面為默認是'點擊1'

在jQuery中，可以使用trigger()方法完成模擬操作。
例如可以使用下面的代碼來觸發(fā)A鏈接的click事件。

$('a').first().trigger("click");

這樣當頁面加載完畢后，觸發(fā)第一個A鏈接的click事件，頁面將顯示x1

觸發(fā)自定義事件

trigger()方法不僅能觸發(fā)瀏覽器支持的具有相同名稱的事件，也可以觸發(fā)自定義名稱的事件。
例如為元素綁定一個”myEvent”的事件,jQuery代碼如下：

$('#btn').bind("myEvent", function(){ 
  alert("自定義事件");
});

想要觸發(fā)這個事件,可以使用以下代碼來實現(xiàn)：

$('#btn').trigger("myEvent");

傳遞數(shù)據(jù)

trigger(type,[data])方法有兩個參數(shù)，
第1個是事件對象或者要觸發(fā)的事件類型,
第2個參數(shù)是傳遞給事件處理函數(shù)的附加參數(shù),以數(shù)組形式傳遞。通?？梢酝ㄟ^傳遞一個參數(shù)給
回調(diào)函數(shù)來區(qū)別這次事件是代碼觸發(fā)的還是用戶觸發(fā)的。

下面是一個傳遞數(shù)據(jù)的例子。

$('#btn').bind("myEvent", function(event,message1,message2){ 
  alert(message1 + "," + message2);
});
$('#btn').trigger("myEvent", ["Hello","World!"]);

以上就是jQuery自動觸發(fā)事件trigger的使用方法，希望對大家的學習有所幫助。

您可能感興趣的文章:

相關(guān)文章

jQuery結(jié)合PHP+MySQL實現(xiàn)二級聯(lián)動下拉列表[實例]
二級聯(lián)動的實現(xiàn)方法還真不少，實用性也很強，這里結(jié)合一個學生信息表的實例，來分享一下我的實現(xiàn)過程
2011-11-11
jQuery+php實時獲取及響應(yīng)文本框輸入內(nèi)容的方法
這篇文章主要介紹了jQuery+php實時獲取及響應(yīng)文本框輸入內(nèi)容的方法,涉及jQuery響應(yīng)鍵盤事件及ajax調(diào)用php文件針對輸入內(nèi)容的處理與回調(diào)相關(guān)技巧,非常簡單易懂,需要的朋友可以參考下
2016-05-05
40款非常有用的 jQuery 插件推薦（系列一）
jQuery 是一個非常優(yōu)秀的 JavaScript 框架，在現(xiàn)在的 Web 開發(fā)項目中扮演著重要角色。jQuery 使用簡單靈活，同時還有許多成熟的插件可供選擇，它可以幫助你在項目中加入一些非常好的效果，讓網(wǎng)站有更好的可用性和用戶體驗
2011-12-12
jquery實現(xiàn)百葉窗效果
本文主要分享了jquery實現(xiàn)百葉窗效果的示例代碼。具有一定的參考價值，下面跟著小編一起來看下吧
2017-01-01
jQuery-ui中自動完成實現(xiàn)方法
關(guān)于jQuery-ui-1.8中的自動完成控件，其匹配方式是使用正則表達式進行匹配的。
2010-06-06
jQuery實現(xiàn)手風琴小案例
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)手風琴小案例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-04-04
基于jquery實現(xiàn)彩色投票進度條代碼解析
這篇文章主要介紹了基于jquery實現(xiàn)彩色投票進度條代碼解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2020-08-08
jQuery中nextUntil()方法用法實例
這篇文章主要介紹了jQuery中nextUntil()方法用法,實例分析了nextUntil()方法的功能、定義及匹配同輩元素的技巧與注意事項,需要的朋友可以參考下
2015-01-01
jQuery構(gòu)造函數(shù)init參數(shù)分析續(xù)
其實樓主的F和jQuery.fn.init是相等的; 實現(xiàn)功能是和jq一樣的, 只是jq的把構(gòu)造函數(shù)放進原型;如果非要說原因,個人理解jq這樣寫整體結(jié)構(gòu)清晰,先是入口構(gòu)造函數(shù),緊跟著是原型部分(原型里面init是初始化),但是不好理解;乍一看確實挺繞, 我也是看了好久才明白怎么回事
2015-05-05
JQuery中層次選擇器用法實例詳解
這篇文章主要介紹了JQuery中層次選擇器用法,以實例形式較為詳細的分析了jQuery中層次選擇器的各種常見使用技巧,并備有較為詳細的注釋說明,需要的朋友可以參考下
2015-05-05