Question

我正在使用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之前执行。为什么会这样？

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

Answer 1

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

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);
}

Answer 2

即使在onclick之前，该功能似乎也在执行。为什么会这样？

看看你写的声明：

myapp.module2.addBackgroundImage(imageElement)

你调用函数，然后将其返回值作为函数参数传递。

你想要更多的东西：

myapp.module2.addBackgroundImage.bind(myapp.module2, imageElement)

（或您在注释掉的代码中使用的函数表达式）

addEventListener不能在Javascript中工作，但jQuery Click正在工作

2 个答案: