jquery下為Event handler傳遞動(dòng)態(tài)參數(shù)的代碼
更新時(shí)間：2011年01月06日 23:45:56 作者：
在jquery cook book里看到一篇給event handler傳遞動(dòng)態(tài)參數(shù)的文章 感覺(jué)挺實(shí)用的 跟大家分享下
實(shí)例代碼
<body>
<div id="demo"></div>
<button id="btn" >trigger it</button>
<script type="text/javascript">
(function($) {
//demo1
$("#demo").bind("demo-trigger", function(e, args) {
var info = [];
//對(duì)應(yīng)的我們從args參數(shù)中獲取數(shù)據(jù)
for(var prop in args) {
info.push(prop + ":" + args[prop]);
}
this.innerHTML = info.join(';');
});
$('#btn').click(function() {
// 我們把數(shù)據(jù)作為一個(gè)參數(shù)和我們關(guān)心的事件名一起傳入trigger方法
$('#demo').trigger('demo-trigger', {
name:'Andrew',
age: '23',
job: 'FrontEnd Dev'
});
});
/**demo2
$("#demo").bind("demo-trigger", function(e) {
var info = [];
//我們通過(guò)傳入的e.extra來(lái)獲取我們傳入的數(shù)據(jù)
for(var prop in e.extra) {
info.push(prop + ":" + e.extra[prop]);
}
//展現(xiàn)出來(lái)
this.innerHTML = info.join(';');
});
$('#btn').click(function() {
//這個(gè)用法很有意思 我們new一個(gè)jQuery Event對(duì)象 參數(shù)為我們關(guān)心的事件名
var event = new jQuery.Event("demo-trigger");
//給這個(gè)event附加一個(gè)屬性 包含我們的數(shù)據(jù)
event.extra = {
name:'Andrew',
age :'23',
job :'FrontEnd Dev'
};
//最后把event傳入trigger方法 ...看上面的$('#demo').....
$('#demo').trigger(event);
});**/
})(jQuery);
</script>
</body>
復(fù)制代碼 代碼如下:
<body>
<div id="demo"></div>
<button id="btn" >trigger it</button>
<script type="text/javascript">
(function($) {
//demo1
$("#demo").bind("demo-trigger", function(e, args) {
var info = [];
//對(duì)應(yīng)的我們從args參數(shù)中獲取數(shù)據(jù)
for(var prop in args) {
info.push(prop + ":" + args[prop]);
}
this.innerHTML = info.join(';');
});
$('#btn').click(function() {
// 我們把數(shù)據(jù)作為一個(gè)參數(shù)和我們關(guān)心的事件名一起傳入trigger方法
$('#demo').trigger('demo-trigger', {
name:'Andrew',
age: '23',
job: 'FrontEnd Dev'
});
});
/**demo2
$("#demo").bind("demo-trigger", function(e) {
var info = [];
//我們通過(guò)傳入的e.extra來(lái)獲取我們傳入的數(shù)據(jù)
for(var prop in e.extra) {
info.push(prop + ":" + e.extra[prop]);
}
//展現(xiàn)出來(lái)
this.innerHTML = info.join(';');
});
$('#btn').click(function() {
//這個(gè)用法很有意思 我們new一個(gè)jQuery Event對(duì)象 參數(shù)為我們關(guān)心的事件名
var event = new jQuery.Event("demo-trigger");
//給這個(gè)event附加一個(gè)屬性 包含我們的數(shù)據(jù)
event.extra = {
name:'Andrew',
age :'23',
job :'FrontEnd Dev'
};
//最后把event傳入trigger方法 ...看上面的$('#demo').....
$('#demo').trigger(event);
});**/
})(jQuery);
</script>
</body>
相關(guān)文章
javascript 全角轉(zhuǎn)換實(shí)現(xiàn)代碼
當(dāng)客戶端用戶切換輸入法至全角時(shí)可能您的表單提交會(huì)有漏洞哦！不過(guò)事實(shí)上js有這功能 可以將其轉(zhuǎn)換為非全角字符！2009-07-07
jQuery Migrate是應(yīng)用遷移輔助插件，是用于高級(jí)版本兼容低級(jí)版本輔助插件。這篇文章主要介紹了jQuery Migrate 插件用法 ,需要的朋友可以參考下2019-05-05
冒泡事件就是點(diǎn)擊子節(jié)點(diǎn)，會(huì)向上觸發(fā)父節(jié)點(diǎn)，祖先節(jié)點(diǎn)的點(diǎn)擊事件。本文主要介紹JQuery阻止事件冒泡的實(shí)例解析。需要的朋友來(lái)看下吧2016-12-12
jQuery Ajax前后端使用JSON進(jìn)行交互示例
本篇文章主要介紹了jQuery Ajax前后端使用JSON進(jìn)行交互示例，實(shí)現(xiàn)前端通過(guò)jQuery Ajax傳輸json到后端，后端接收json，對(duì)json進(jìn)行處理，后端返回一個(gè)json給前端，有興趣的可以了解一下。2017-03-03
下面小編就為大家?guī)?lái)一篇JQuery的常用選擇器、過(guò)濾器、方法全面介紹。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05
關(guān)于jquery動(dòng)態(tài)增減控件的一些想法和小插件
這段代碼壓縮到100行內(nèi)，而且擴(kuò)展方便，可以非常輕松的增減控件的數(shù)量,使用非常簡(jiǎn)單。2010-08-08
jQuery對(duì)table表格進(jìn)行增刪改查
這篇文章主要為大家詳細(xì)介紹了jQuery對(duì)table表格進(jìn)行增刪改查操作，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
jQuery插件FusionCharts繪制的3D環(huán)餅圖效果示例【附demo源碼】
這篇文章主要介紹了jQuery插件FusionCharts繪制的3D環(huán)餅圖效果,結(jié)合完整實(shí)例形式分析了jQuery使用FusionCharts載入xml格式數(shù)據(jù)繪制圖形的操作步驟與相關(guān)實(shí)現(xiàn)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-04-04
JQ技術(shù)實(shí)現(xiàn)注冊(cè)頁(yè)面帶有校驗(yàn)密碼強(qiáng)度
這篇文章主要介紹了JQ技術(shù)實(shí)現(xiàn)注冊(cè)頁(yè)面帶有校驗(yàn)密碼強(qiáng)度,需要的朋友可以參考下2015-07-07
jquery實(shí)現(xiàn)圖片自動(dòng)輪播效果
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)圖片自動(dòng)輪播效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02