javascript - addEventListener在Javascript中不起作用，但jQuery Click起作用

我正在使用JavaScript的模块化模式并尝试以Javascript方式而不是Jquery进行操作

myapp.module1 = (function($){
"use strict";

var _config = {
    backgroundImages : document.getElementsByClassName('img_paste'),
}

for(var i = 0;i < _config.backgroundImages.length; i++){
var imageElement = _config.backgroundImages[i];
imageElement.addEventListener('click',myapp.module2.addBackgroundImage(imageElement),false);
}

// $('.img_paste').click(function(){
//  var img = this;
//  console.log(this);
//  console.log($(this));

//  myapp.module2.addBackgroundImage(img);
// });


})(jQuery);

在以上代码中，Jquery click函数有效，但Javacript函数无效。

当我尝试调试时，尝试在addBackgroundImage()函数中调出映像。

var addBackgroundImage = function(imageToBeAdded){
    console.log(imageToBeAdded);//
    _addImageToCanvas(imageToBeAdded);
}

该函数似乎甚至在onclick之前执行。为什么会这样呢？

首先，图像元素在控制台中似乎为空，然后在控制台中显示了一些图像元素之后。

最佳答案

看一下这个简单的代码示例：

function describeTheParameter(p) {
    console.log("describeTheParameter invoked. p is of type " + typeof(p));
}

function stringFunction() {
    return "Hello World!";
}

describeTheParameter(stringFunction());
describeTheParameter(stringFunction);

这导致


  describeTheParameter被调用。 p是字符串类型
  
  describeTheParameter被调用。 p是函数类型


在第一个调用中，我们调用stringFunction，然后将结果传递给describeTheParameter。

在第二个调用中，我们实际上是将该函数传递给describeTheParameter。

调用addEventListener时，必须遵循第二个调用的模式：传递函数而不调用它：



在下面的代码行中，您要调用addBackgroundImage，然后将结果（将为undefined）传递给addEventListener。

imageElement.addEventListener('click',myapp.module2.addBackgroundImage(imageElement),false);

您需要将尚未被调用的函数传递到addEventListener中。

使代码正常工作的最小步骤是使用currying函数：

function addImage(imageElement) {
      return function() {
          myapp.module2.addBackgroundImage(imageElement);
      }
}


for(var i = 0;i < _config.backgroundImages.length; i++){
    var imageElement = _config.backgroundImages[i];
    imageElement.addEventListener('click', addImage(imageElement), false);
}

对于更简单的代码，请使用this关键字。在这种情况下，this将指向引发事件的元素。

function imageClickHandler() {
    var imageElement = this;
    myapp.module2.addBackgroundImage(imageElement);
}

for(var i = 0;i < _config.backgroundImages.length; i++){
   var imageElement = _config.backgroundImages[i];
   imageElement.addEventListener('click', imageClickHandler, false);
}