jquery下为Event handler传递动态参数的代码

227 阅读 0 评论 150 点赞

我是靠谱客的博主温婉黑猫，最近开发中收集的这篇文章主要介绍jquery下为Event handler传递动态参数的代码，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

实例代码

复制代码代码如下:

 
<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 = []; 
//对应的我们从args参数中获取数据 
for(var prop in args) { 
info.push(prop + ":" + args[prop]); 
} 
this.innerHTML = info.join(';'); 
}); 
$('#btn').click(function() { 
// 我们把数据作为一个参数和我们关心的事件名一起传入trigger方法 
$('#demo').trigger('demo-trigger', { 
name:'Andrew', 
age: '23', 
job: 'FrontEnd Dev' 
}); 
}); 

/**demo2 
$("#demo").bind("demo-trigger", function(e) { 
var info = []; 
//我们通过传入的e.extra来获取我们传入的数据 
for(var prop in e.extra) { 
info.push(prop + ":" + e.extra[prop]); 
} 
//展现出来 
this.innerHTML = info.join(';'); 
}); 
$('#btn').click(function() { 
//这个用法很有意思 我们new一个jQuery Event对象 参数为我们关心的事件名 
var event = new jQuery.Event("demo-trigger"); 
//给这个event附加一个属性 包含我们的数据 
event.extra = { 
name:'Andrew', 
age :'23', 
job :'FrontEnd Dev' 
}; 
//最后把event传入trigger方法 ...看上面的$('#demo')..... 
$('#demo').trigger(event); 
});**/ 
})(jQuery); 
</script> 
</body> 