给Event handler传递动态参数

最新推荐文章于 2024-05-18 00:32:44 发布

weixin_30469895

最新推荐文章于 2024-05-18 00:32:44 发布

阅读量80

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/AndyWithPassion/archive/2011/01/03/jq_event_args.html

本文介绍了一种在jQuery中为事件处理器传递动态参数的方法，通过两个实例展示了如何使用trigger方法携带额外信息，并探讨了不同方式的优势。

有段时间没写些东西了......参加工作大半年感觉是收获不小啊新年以致

在这里我想真心的祝福所有园友所有有梦想的人新的一年技术更牛X 身体棒棒职业发展更上一层

好了回过来讲主要内容.

在jquery cook book里看到一篇给event handler传递动态参数的文章感觉挺实用的跟大家分享下

直接拿例子吧...

 1 <body>
 2     <div id="demo"></div>
 3     <button id="btn" >trigger it</button>
 4     <script type="text/javascript">
 5         (function($) {
 6             //demo1
 7             $("#demo").bind("demo-trigger", function(e, args) {
 8                 var info = [];
 9                 //对应的我们从args参数中获取数据
10                 for(var prop in args) {
11                     info.push(prop + ":" + args[prop]);
12                 }
13                 this.innerHTML = info.join(';');
14             });
15             $('#btn').click(function() {
16                 // 我们把数据作为一个参数和我们关心的事件名一起传入trigger方法
17                 $('#demo').trigger('demo-trigger', {
18                     name:'Andrew',
19                     age: '23',
20                     job: 'FrontEnd Dev'
21                 });
22             });
23 
24             /**demo2
25             $("#demo").bind("demo-trigger", function(e) {
26                 var info = [];
27                 //我们通过传入的e.extra来获取我们传入的数据
28                 for(var prop in e.extra) {
29                     info.push(prop + ":" + e.extra[prop]);
30                 }
31                 //展现出来
32                 this.innerHTML = info.join(';');
33             });
34             $('#btn').click(function() {
35                 //这个用法很有意思 我们new一个jQuery Event对象 参数为我们关心的事件名
36                 var event = new jQuery.Event("demo-trigger");
37                 //给这个event附加一个属性  包含我们的数据
38                 event.extra = {
39                     name:'Andrew',
40                     age :'23',
41                     job :'FrontEnd Dev'
42                 };
43                 //最后把event传入trigger方法  ...看上面的$('#demo').....
44                 $('#demo').trigger(event);
45             });**/
46         })(jQuery);
47     </script>
48 </body>