Question

我有一些元素，当我单击它们时，我需要运行一个函数，并且该函数需要知道单击了哪个元素。

示例A：

var elements = $(".config-cell");
        for (var i = 0; i < elements.length; i++) {
            elements[i].addEventListener("click", function() {
                console.log("clicked");
            });
        }

在正确调用函数时可以正常工作，但是我不知道如何将元素传递给函数，以便它可以使用它。

所以我尝试使用这种方法，发现了一些奇怪的东西。

示例B：

var elements = $(".config-cell");
        for (var i = 0; i < elements.length; i++) {
            elements[i].addEventListener("click", this.cellCrop());
        }

当简单地调用位于其他位置的函数时，我在加载窗口时注意到它会自动触发该函数，然后它甚至不添加事件侦听器，因此您单击后的任何时间都不会发生。

底线，我希望能够通过被单击的当前元素并使它触发功能。但是出于好奇，我想知道为什么方法B如此起作用。

了解到它知道使用哪个，因为“ forEach”具有带有参数的回调

.forEach(function callback(currentValue[, index[, array]])

例如：此回叫如何知道应该是什么 “ eachName”和“ index”
var friends = ["Mike", "Stacy", "Andy", "Rick"];
friends.forEach(function (eachName, index){
  console.log(index + 1 + ". " + eachName); // 1. Mike, 2. Stacy, 3. Andy, 4. Rick
});
您可以使用.addEventListener做到这一点，而不是将其设置为 var？

话虽这么说，有没有办法让它通过您自己的函数传递变量？喜欢：

var passthrough = 5;
            $(".config-cell").on("click", function(passthrough) {
                var five = passthrough;
                console.log(five);
            });

Answer 1

尝试一下：您可以使用$(this)

$(".config-cell").on("click", function(){
   var clickedCell = $(this);// this refers to current clicked cell which can be used to get other details or write logic around it
});

Answer 2

首先，this.cellCrop()调用该函数，this.cellCrop传递它。因此，如果您想设置监听器，那就应该了

elements[i].addEventListener("click", this.cellCrop);

现在实际上可以在函数中单击元素，可以通过几种方法来实现。

使用自动传递给事件侦听器的事件对象中的currentTarget / target

elements[i].addEventListener("click", function(event){
  //the actual element clicked on
  var target = event.target;
  //the element the event was set on, in this case whatever elements[i] was
  var currentTarget = event.currentTarget;
});
//same using jQuery
$(elements[i]).click(function(event){
  var target = event.target;
  var currentTarget = event.currentTarget;
});

使用this关键字

elements[i].addEventListener("click", function(event){
  //this will refer to whatever elements[i] was
  var target = this;
});
//same using jQuery
$(elements[i]).click(function(event){
  var target = $(this);
});

这与使用对象方法相同：

obj = {
  cellCrop:function(event){
     var target = event.target;
     /* etc */
  },
  someOtherMethod:function(){
     //...
     elements[i].addEventListener("click",this.cellCrop);
     //or jQuery
     $(elements[i]).click(this.cellCrop);
     //...
  }
};
obj.someOtherMethod();

此回叫如何知道应该是“ eachName”和“ index”的

因为forEach方法的文档告诉使用它的人将如何调用它。因此，您根据该文档编写了回调。

例如forEach的回调通常采用

的形式

function callback(currentValue[, index[, array]])

这意味着在forEach()内部将以这种方式调用您的回调

function forEach(callback){
  //`this` inside forEach is the array
  for(let i=0; i<this.length; i++){
     callback(this[i], i, this);
  }
}

关于将任意数据传递给函数，有几种方法可以完成：

在匿名函数中包装对函数的调用，并使用更多参数显式调用该函数

obj = {
  cellProp:function(event,a,b,c){
    var element = event.currentTarget;
  }
}
//normal anonymous function
elements[i].addEventListener('click',function(e){
  obj.cellProp(e,1,2,3);
});
//fat arrow function
elements[i].addEventListener('click',e=>obj.cellProp(e,1,2,3))

在上面的a，b和c中将分别包含值1,2和3

您还可以使用类似bind的方法，这些方法将更改函数的thisArg（see this question to see more on that），但也将参数传递给函数

obj = {
   //note event comes last as bind, call, and apply PREPEND arguments to the call
   cellProp:function(a,b,c,event){
      //`this` will change depending on the first
      //argument passed to bind
      var whatIsThis = this;
      var element = event.target;
   }
}
//passing obj as the first argument makes `this` refer to 
//obj within the function, all other arguments are PREPENDED
//so a,b, and c again will contain 1,2 and 3 respectively.
elements[i].addEventListener('click', obj.cellProp.bind(obj,1,2,3) );

In the case of jQuery, you can also pass data in using an object at the time of setting up the event：

obj = {
  cellProp:function(event){
    var data = event.data;
    console.log(data.five);
  }
}

jQuery(elements[i]).click({five:5},this.cellProp);

jQuery在单击事件侦听器和函数上使用不同的参数触发的方式不同吗？

2 个答案: