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