给泛型事件处理程序提供参数

Give arguments to generic eventhandler

本文关键字：参数 程序 泛型 事件处理      更新时间：2023-09-26

我正在创建一堆具有通用onclick事件的元素，如

function foo( i , j ) {
   alert("foo");
   //dostuff 
};
for (i = 1; i < 8; i++){
  var clas = get_class_for_index( i );
  for ( j = 0; j < 96; j++){
     // tbody > #(i) is a <tr>
     $("#table > tbody > #" + i ).append( function(){
         // I want to give ( i , j ) to foo
         return $("<td id='" + j + "' class='" + clas + "'></td>").on("click", foo );
     });
  };
};

那么，我怎么给foo这些参数呢?我也可以使用和的id，因为它们是(I,j)但是我怎么从foo里面得到它们呢?

您需要在这里使用IIFE闭包，否则由于作用域，您将最终将i or j的最后迭代值传递给事件处理程序。

像这样 :

var $anchors = $("a");
function foo(idx) {
   alert("foo " + idx);
};
for(var i = 0; i < $anchors.length; i++) {
    $anchors.eq(i).on("click", (function(i) {
        return function(e) {
            foo(i);
        }
    }(i)));    
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#">Link</a> | <a href="#">Link</a> | <a href="#">Link</a> | <a href="#">Link</a>

在上面的示例中，我们使用一个立即执行的函数(以i作为参数)并返回一个函数，然后将该函数绑定为单击处理程序并将正确的i传递给foo。这称为IIFE(立即调用的函数表达式)。

我可以传递参数到事件处理程序?

不，你不能。事件处理函数在事件发生时执行，您不会调用foo()来传递i和j，即使在for循环执行完成后，foo()也会被执行，并且不会存在任何i &j .

Then What can do in my condition.

最好的方法是将i和j值添加到DOM元素本身，以便您可以在事件处理程序函数中访问它。您可以使用jQuery的data()方法向DOM中添加额外的信息。

function foo(evt) {
  $(evt.currentTarget).data() //You will get here all values, i.e. i & j
    //dostuff 
};
for (i = 1; i < 8; i++) {
  var clas = get_class_for_index(i);
  for (j = 0; j < 96; j++) {
    // tbody > #(i) is a <tr>
    $("#table > tbody > #" + i).append(function() {
      // I want to give ( i , j ) to foo
      return $("<td id='" + j + "' class='" + clas + "'></td>").data({
        i: i,
        j: j
      }).on("click", foo);
    });
  };
};

您需要使用jquery on函数，以便在创建后将事件注册到元素，您可以使用元素的Id将事件附加到它并在事件回调函数中调用foo。

我添加了一个工作片段，它使用了I和j的组合id，如下所示

function foo( i , j ) {
       console.log(i+"_"+j);
       alert(i+"_"+j);
       //dostuff 
    };
    
    for (i = 1; i < 8; i++){
      var clas = "aa_"+i;
      
       $("#table").append("<tr id='" + i + "'></tr>");
         
      for ( j = 0; j < 96; j++){
    
         // tbody > #(i) is a <tr>
         $("#table > tbody > #" + i ).append( function(){
             // I want to give ( i , j ) to foo
             return $("<td id='test_" + i + "_" + j + "' class='" + clas + "'>aa</td>").on("click",    function(){
               
               
               var id = $(this).attr("id").split('_');
               //console.log(id);
               foo(id[1],id[2]);
           } );
         });
    
      };
    };
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table"></table>

当使用事件处理程序时，您可以使用jquery的。on()作为事件处理程序，就像这个例子。

$("#id").on("click", function(){   
  //do stuff here or call a function; 
});

参考:http://api.jquery.com/on/

相关文章：