addEventListener not working in Javascript but jQuery Click is working

Question

I am using modular pattern of javascript and trying to do things in Javascript way rather than 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);

In the above code, the Jquery click function works but not the Javacript one.

When I tried to debug, I tried to console out the image in addBackgroundImage() function.

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

The function seems to be executing even before onclick. Why is that happening?

First, the images elements appear to be empty in the console, then after some some the image elements are displayed in console.

Andrew Shepherd · Accepted Answer · 2016-04-27 22:15:38Z

3

Take a look at this simple code example:

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

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

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

This results in

describeTheParameter invoked. p is of type string

describeTheParameter invoked. p is of type function

In the first call, we are calling stringFunction, and then passing the result to describeTheParameter.

In the second call, we are actually passing the function to describeTheParameter.

When you call addEventListener you must follow the pattern of the second call: pass the function without invoking it:

In the following line of code, you are invoking addBackgroundImage, and then passing the result (which will be undefined) to addEventListener.

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

You need to pass a yet-to-be-called function into addEventListener.

The smallest step to make your code work is to employ a currying function:

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

For much simpler code, make use of the this keyword. In this case, this will point to the element that's firing the event.

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

edited Apr 27, 2016 at 22:15

answered Apr 27, 2016 at 10:25

Andrew Shepherd

45.5k33 gold badges148 silver badges212 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Abhinav Over a year ago

This worked..thank you so much, but I am still not able to comprehend your solution, I load all my images first and at the bottom have placed the scripts, why doesnt it work for what I tried?

Abhinav Over a year ago

Hi Andrew..I am in a learning stage so pls bear with me, I tried out both of your solutions, why is it necessary to return the function in your first solution cos in your second solution you are just executing the function... I tried to execute function instead of returning it in your first solution, but it wont work! Whats the difference?

Useless Code Over a year ago

@Abhinav In that first one addImage is not what is being assigned as the click handler, it is actually executing immediately and returning an anonymous function, which is what is actually assigned as the click handler. That new function will have access to the value of the imageElement that was passed into addImage via closure.

Andrew Shepherd Over a year ago

@Abhinav - I've written an open paragraph. I think this should explain the underlying concept.

Quentin · Accepted Answer · 2016-04-27 10:20:20Z

2

The function seems to be executing even before onclick. Why is that happening?

Look at the statement you wrote:

myapp.module2.addBackgroundImage(imageElement)

You are calling the function and then passing its return value as the function argument.

You want something more along the lines of:

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

(or the function expression that you used in the commented out code)

answered Apr 27, 2016 at 10:20

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

3 Comments

Abhinav Over a year ago

Where should I specify the click event here? cudn get you

Quentin Over a year ago

@Abhinav — In the same place. You just change the bit of code I was talking about.

Useless Code Over a year ago

imageElement.addEventListener('click', myapp.module2.addBackgroundImage.bind(myapp.module2, imageElement), false);. What this is doing is similar to what is happening in the first solution @Andrew Shepherd purposed. This is using bind to create a new function that when called, calls myapp.module2.addBackgroundImage with the value of imageElement (at the time bind was called) as its argument.

Collectives™ on Stack Overflow

addEventListener not working in Javascript but jQuery Click is working

2 Answers 2

4 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related