How to add event listener to an array of elements?

[ujvgab]

Hello!

I have a scene with 40 items. Named "item1,item2...item40". I want to add click event listener to all of them. I've tried a few things, but none of them works. My last attempt is:

for (var i = 0; i < items.length; i++) {

   items.addEventListener("click", EndLevel);

}

where the "items" is the array. It is always runs to an error. What should I do?

Thanks in advice,

S

[kdmemory]

Hi S

Are all items (buttons or movieclips?) dealt with using the same Event function EndLevel when clicked?

Can you share this EndLevel function?

function EndLevel (e) {

    // what is happening here?

}

Klaus

[JoãoCésar]

Hi.

There are a number of ways you can do this.

Here are some:

Using for each to access the built-in children property that all CreateJS container objects have:

// for each, children
var tl = this;
tl.start = function(e)
{
    tl.children.forEach(function(item)
    {
          item.on("click", function(e)
          {
              console.log("click");
          });
    });
};
stage.on("drawstart", tl.start, this, true);

Using for loop to access the built-in children property that all CreateJS container objects have:

// reverse for loop, children
var tl = this;
tl.start = function(e)
{
    for (var i = tl.children.length - 1; i >= 0; i--)
    {
          tl.children.on("click", function(e)
          {
              console.log("click");
          });
    }
};
stage.on("drawstart", tl.start, this, true);

Using bracket notation if you want to access objects by a sequence of names:

// reverse for loop, bracket notation
var tl = this;
for (var i = 39; i >= 0; i--)
{
    tl.["item" + (i + 1)].on("click", function(e)
    {
          console.log("click");
    });
}

If the advanced layers mode is on, you may need to reference the layer name first.

So instead of just:

tl.children

It could be:

tl.Layer_1.children

Please let us know if this helps.

Regards,

JC

[ClayUUID]

JoãoCésar  wrote

There are a number of ways you can do this.

Using for each to access the built-in children property that all CreateJS container objects have:

Using for loop to access the built-in children property that all CreateJS container objects have:

Looping over the children object is a dangerous way to do this, because it attempts to add an event listener to every child object, no matter what it is. It's really not an advisable approach.

Secondly, even if one were using this approach, forEach should not be used on public-facing sites, because it fails on a non-trivial percentage of desktop browsers. Maybe in a few years it will be safe enough, but for now, no.

[kdmemory · Accepted solution]

In any case you need to add the eventListeners like this

for (var i = 0; i < items.length; i++) {

     this[items].addEventListener("click", EndLevel);

}

Klaus

[JoãoCésar]

Thanks for letting me know, Clay.

I just gave the OP a way of using the children property but certainly it woulbe be better to contain all the instances he or she wants to access in a separate container.

And I didn't know about this for each flaw. Thanks again!

[ujvgab]

Thanks. It works. One more question. In the function, I want to set the visibility of the item to false, but on the same way it doesn't work.

for (var i = 0; i < items.length; i++) {

            _doc[items].addEventListener("click", Game = function(e) {

                _doc.[items].visible = false;

});

How should I do this?

[kdmemory]

Hi S

So you want to set all (40) items invisible? And what is _doc ? Did you put a variable on top of your script like var _doc = this ?

however if you want all items invisible (using _doc and Game instead of EndLevel as event function name):

var _doc = this;
for (var i = 0; i < itmes.length; i++) {
    _doc[items].addEventListener("click", Game);
    _doc[items].visible = false;
}

But this is actually nonsense because all items set to visible = false won't be clickable!

So, if you want to make those items invisible that have been clicked:

var _doc = this;
for (var i = 0; i < itmes.length; i++) {
    _doc[items].addEventListener("click", Game);
}
function Game (e) {
    // whatever you want do here
    e.target.visible = false;
}

Klaus