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()函數(shù)有三種不同的語法，在本文將為大家詳細介紹下，感興趣的朋友不要錯過2013-10-10
這篇文章介紹了jquery實現(xiàn)手風(fēng)琴效果實例代碼，有需要的朋友可以參考一下2013-11-11
本篇文章主要介紹了jquery編寫日期選擇器的實現(xiàn)過程與方法，具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03
如何使用jquery動態(tài)加載js,css文件實現(xiàn)代碼
在jquery中要實現(xiàn)動態(tài)加載js文件的方法有很多種,最簡單的我們可以直接利用$.include()方法來實現(xiàn)，感興趣的朋友可以參考下哈2013-04-04
jQuery生成asp.net服務(wù)器控件 但不幸的是，該服務(wù)器控件依然沒有起作用，還是用隱藏服務(wù)器控件來解決吧2010-02-02
這篇文章主要介紹了輕量級網(wǎng)頁遮罩層jQuery插件用法,實例分析了jquery遮罩層插件的定義、功能及使用方法,非常簡單實用,需要的朋友可以參考下2015-07-07
jQuery插入節(jié)點和移動節(jié)點用法示例(insertAfter、insertBefore方法)
這篇文章主要介紹了jQuery插入節(jié)點和移動節(jié)點的方法,結(jié)合實例形式分析了insertAfter和insertBefore方法針對頁面元素節(jié)點操作的使用技巧,需要的朋友可以參考下2016-09-09
JQuery 插件模板 制作jquery插件的朋友可以參考下
JQuery 插件模板 制作jquery插件的朋友可以參考下2010-03-03
JQuery Tips(3) 關(guān)于$()包裝集內(nèi)元素的改變
JQuery包裝集內(nèi)的元素在一開始的選定后，還可以通過一系列JQuery提供的方法對包裝集內(nèi)的元素進行擴充，修改，篩選，刪除find()方法 VS filter()方法2009-12-12
Jquery下判斷Id是否存在的代碼，需要的朋友可以參考下。2011-01-01