jquery的trigger和triggerHandler的區(qū)別示例介紹
更新時間：2014年04月20日 14:13:19 作者：
這篇文章主要介紹了jquery的trigger和triggerHandler的區(qū)別,需要的朋友可以參考下
trigger 和triggerHandler都是模擬事件發(fā)生的 用具體的案例來描述一下區(qū)別
<html lang="en">
<head>
<meta charset="utf-8">
<title>test</title>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<input type="checkbox" />
<input type="text" id="test"/>
<input type="button" value="button" id="bnt" onclick="bntClick()"/>
</body>
<script>
$( document ).ready(function() {
$("input[type='checkbox']").bind("click",function(){
$("#test").val("www.baidu.com");
});
});
function bntClick(){
$("input[type='checkbox']").trigger("click");
}
</script>
</html>
當(dāng)點擊 checkbox的時候 checkbox勾上 并將input[type='text']賦值www.baidu.com
當(dāng)點擊 input[type='button'] 的時候 就會發(fā)生跟點擊checkbox同樣的事情
將trigger換成triggerHandler時候 當(dāng)點擊 input[type='button'] 的時候 就只會給input[type='text']賦值 而不會勾選checkbox
triggerHandler 阻止了 綁定事件的元素的默認行為
復(fù)制代碼 代碼如下:
<html lang="en">
<head>
<meta charset="utf-8">
<title>test</title>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<input type="checkbox" />
<input type="text" id="test"/>
<input type="button" value="button" id="bnt" onclick="bntClick()"/>
</body>
<script>
$( document ).ready(function() {
$("input[type='checkbox']").bind("click",function(){
$("#test").val("www.baidu.com");
});
});
function bntClick(){
$("input[type='checkbox']").trigger("click");
}
</script>
</html>
當(dāng)點擊 checkbox的時候 checkbox勾上 并將input[type='text']賦值www.baidu.com
當(dāng)點擊 input[type='button'] 的時候 就會發(fā)生跟點擊checkbox同樣的事情
將trigger換成triggerHandler時候 當(dāng)點擊 input[type='button'] 的時候 就只會給input[type='text']賦值 而不會勾選checkbox
triggerHandler 阻止了 綁定事件的元素的默認行為
您可能感興趣的文章:
- 淺談js在html中的加載執(zhí)行順序,多個jquery ready執(zhí)行順序
- 簡述jQuery ajax的執(zhí)行順序
- jquery中ajax函數(shù)執(zhí)行順序問題之如何設(shè)置同步
- Jquery ajax執(zhí)行順序 返回自定義錯誤信息(實例講解)
- jQuery中(function(){})()執(zhí)行順序的理解
- 如何確保JavaScript的執(zhí)行順序 之jQuery.html深度分析
- jquery $.ajax各個事件執(zhí)行順序
- jQuery中triggerHandler()方法用法實例
- jQuery事件模型默認行為執(zhí)行順序及trigger()與 triggerHandler()比較實例分析
相關(guān)文章
這篇文章主要介紹了jQuery validate 驗證radio實例代碼,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-03-03
Jquery判斷radio、selelct、checkbox是否選中及獲取選中值方法總結(jié)
這篇文章主要介紹了Jquery判斷radio、selelct、checkbox是否選中及獲取選中值方法總結(jié),本文總結(jié)的比較簡潔直白,看到的朋友按需索取,需要的朋友可以參考下2015-04-04
這篇文章主要為大家詳細介紹了使用jquery制作非常漂亮的相冊集，步驟詳細，細節(jié)介紹完整，感興趣的小伙伴們可以參考一下2016-04-04
制作標簽頁（通常說成滑動門）的實現(xiàn)思路是當(dāng)鼠標在標簽上時下面div會顯示和標簽相對應(yīng)的內(nèi)容，隨著標簽的改變，下面的div也會對應(yīng)改變內(nèi)容2010-05-05
這篇文章主要介紹了jQuery中l(wèi)ive()方法用法,實例分析了live()方法的功能、定義及為匹配元素添加一個或多個事件,并規(guī)定當(dāng)這些事件發(fā)生時運行函數(shù)的使用技巧,需要的朋友可以參考下2015-01-01
這篇文章主要介紹了jquery插件autocomplete用法,結(jié)合實例形式分析了jQuery插件autocomplete與后臺交互實現(xiàn)搜索的自動完成功能實現(xiàn)技巧,需要的朋友可以參考下2016-07-07
這篇文章主要介紹了jQuery 選擇方法及$(this)用法,結(jié)合實例形式分析了jQuery 選擇方法及$(this)相關(guān)使用技巧與注意事項,需要的朋友可以參考下2020-05-05
網(wǎng)站設(shè)計者往往會設(shè)計一些小的工具類（widgets）或者一些可復(fù)用的程序，從而使頁面更楚楚動人，更吸引瀏覽者駐足。這里收集了20個常用Jquery工具類，這些小的工具可以幫助網(wǎng)站設(shè)計人員和站長非常容易地創(chuàng)建漂亮的站點。2010-01-01
jQuery頭像裁剪工具jcrop用法實例(附演示與demo源碼下載)
這篇文章主要介紹了jQuery頭像裁剪工具jcrop用法,結(jié)合實例形式分析了jQuery頭像裁剪工具jquery.jcrop.js具體使用技巧,并附帶了完整的demo源碼供讀者下載參考,需要的朋友可以參考下2016-01-01
之前腳本之家發(fā)布多個獲取url參數(shù)的函數(shù)，這里是jquery的，比較適合已經(jīng)使用了jquery庫的朋友使用。2010-03-03