zoukankan      html  css  js  c++  java
  • 给Event handler传递动态参数

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

       在这里我想真心的祝福所有园友 所有有梦想的人 新的一年技术更牛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>
  • 相关阅读:
    QLU Regular Contest 002 题解
    QLU_ACM 2021 专题训练(一)题解 [暴力、排序、贪心、二分]
    QLU ACM-ICPC 2020 Training Contest 11 @2016 ICPC Dalian [Cloned] 题解
    Codeforces Round #696 (Div. 2) AB题解
    Educational Codeforces Round 102 (Rated for Div. 2) ABCD题解
    20210114
    Codeforces Round #169 (Div. 2) CDE题解
    树剖注意要点
    bzoj3631树链剖分
    bzoj1103树状数组水题
  • 原文地址:https://www.cnblogs.com/AndyWithPassion/p/jq_event_args.html
Copyright © 2011-2022 走看看