JQuery自動(dòng)觸發(fā)事件的方法
本文實(shí)例講述了JQuery自動(dòng)觸發(fā)事件的方法。分享給大家供大家參考。具體如下:
常用模擬
有時(shí)候,需要通過(guò)模擬用戶(hù)操作,來(lái)達(dá)到單擊的效果。例如在用戶(hù)進(jìn)入頁(yè)面后,就觸發(fā)click事件,而不需要用戶(hù)去主動(dòng)單擊。
在JQuery中,可以使用trigger()方法完成模擬操作。例如可以使用下面的代碼來(lái)觸發(fā)id為btn的按鈕的click事件。
$('#btn').trigger("click");
這樣,當(dāng)頁(yè)面加載完畢后,就會(huì)立刻輸出想要的效果。也可以直接簡(jiǎn)寫(xiě)click(),來(lái)達(dá)到同樣的效果:
$('#btn').click();
觸發(fā)自定義事件
trigger()方法不僅能觸發(fā)瀏覽器支持的具有相同名稱(chēng)的事件,也可以觸發(fā)自定義名稱(chēng)的事件。例如為元素綁定一個(gè)“myClick”的事件,JQuery代碼如下:
$('#btn').bind("myClick", function(){
$('#test').append("<p>我的自定義事件.</p>");
});
想要觸發(fā)這個(gè)事件,可以使用以下代碼來(lái)實(shí)現(xiàn):
$('#btn').trigger("myClick");
傳遞數(shù)據(jù)
trigger(type[,data])方法有兩個(gè)參數(shù),第1個(gè)參數(shù)是要觸發(fā)的事件類(lèi)型,第2個(gè)參數(shù)是要傳遞給事件處理函數(shù)的附加數(shù)據(jù),以數(shù)組形式傳遞。通??梢酝ㄟ^(guò)傳遞一個(gè)參數(shù)給回調(diào)函數(shù)來(lái)區(qū)別這次事件是代碼觸發(fā)的還是用戶(hù)觸發(fā)的。
下面是一個(gè)傳遞數(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í)行默認(rèn)操作
trigger()方法觸發(fā)事件后,會(huì)執(zhí)行瀏覽器默認(rèn)操作。例如:
$("input").trigger("focus");
以上代碼不僅會(huì)觸發(fā)為<input>元素綁定的focus事件,也會(huì)使<input>元素本身得到焦點(diǎn)(這是瀏覽器的默認(rèn)操作)。
如果只想觸發(fā)綁定的focus事件,而不想執(zhí)行瀏覽器默認(rèn)操作,可以使用jQuery中另一個(gè)類(lèi)似的方法——triggerHandler()方法。
$("input").triggerHandler("focus");
該方法會(huì)觸發(fā)<input>元素上綁定的特定事件,同時(shí)取消瀏覽器對(duì)此事件的默認(rèn)操作,即文本框只觸發(fā)綁定的focus事件,不會(huì)得到焦點(diǎn)。
希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。
- jQuery實(shí)現(xiàn)長(zhǎng)按按鈕觸發(fā)事件的方法
- JQuery文本改變觸發(fā)事件如聚焦事件、失焦事件
- jQuery如何使用自動(dòng)觸發(fā)事件trigger
- jquery 查找select ,并觸發(fā)事件的實(shí)現(xiàn)代碼
- jquery實(shí)現(xiàn)回車(chē)鍵觸發(fā)事件(實(shí)例講解)
- jquery實(shí)現(xiàn)按Enter鍵觸發(fā)事件示例
- JQuery觸發(fā)事件例如click
- jquery實(shí)現(xiàn)輸入框?qū)崟r(shí)輸入觸發(fā)事件代碼
- jquery選擇器排除某個(gè)DOM元素的方法(實(shí)例演示)
- jQuery 刪除/替換DOM元素的幾種方式
- jquery獲取并修改觸發(fā)事件的DOM元素示例【基于target 屬性】
相關(guān)文章
jQuery實(shí)現(xiàn)選項(xiàng)卡功能(兩種方法)
本文主要介紹了jQuery兩種方法寫(xiě)選項(xiàng)卡的實(shí)例,具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-03-03
深入分析jQuery的ready函數(shù)是如何工作的(工作原理)
這篇文章主要介紹了jQuery的ready函數(shù)是如何工作的,深入分析了jQueryready函數(shù)的運(yùn)作流程及相應(yīng)的工作原理,需要的朋友可以參考下2015-12-12
jquery實(shí)現(xiàn)簡(jiǎn)單的表單驗(yàn)證
這篇文章主要介紹了jquery實(shí)現(xiàn)簡(jiǎn)單的表單驗(yàn)證,思路大概是先為每一個(gè)required添加必填的標(biāo)記,用each()方法來(lái)實(shí)現(xiàn),感興趣的小伙伴們可以參考一下2015-11-11
Web 前端設(shè)計(jì)模式--Dom重構(gòu) 提高顯示性能
首頁(yè)那邊有一個(gè)產(chǎn)品瀏覽的版塊在延遲載入的時(shí)候,將我所有的隱藏幀的項(xiàng)都顯示出來(lái),因?yàn)槁龑?dǎo)致頁(yè)面變形。2010-10-10
jquery使用each方法遍歷json格式數(shù)據(jù)實(shí)例
這篇文章主要介紹了jquery使用each方法遍歷json格式數(shù)據(jù),實(shí)例分析了jQuery中each方法的使用技巧,需要的朋友可以參考下2015-05-05
關(guān)于頁(yè)面加載即執(zhí)行JQuery的三種方法小結(jié)
這篇文章主要介紹了關(guān)于頁(yè)面加載即執(zhí)行JQuery的三種方法小結(jié),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10
一款jquery特效編寫(xiě)的大度寬屏焦點(diǎn)圖切換特效的實(shí)例代碼
焦點(diǎn)圖顯示區(qū)域有固定的寬度,當(dāng)前顯示寬度之外是一個(gè)半透明層顯示的其它的焦點(diǎn)圖片,最好的是,此特效兼容ie6以及其它瀏覽器。2013-08-08
單擊按鈕發(fā)送驗(yàn)證碼,出現(xiàn)倒計(jì)時(shí)的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇單擊按鈕發(fā)送驗(yàn)證碼,出現(xiàn)倒計(jì)時(shí)的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-03-03

