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

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()函數中addBackgroundImage() 出圖像。

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

該函數似乎在onclick之前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是類型函數

to describeTheParameter . 在第一個調用中，我們調用stringFunction ，然后將傳遞給describeTheParameter 。

to 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)

（或在注釋掉的代碼中使用的函數表達式）