How to pass a variable to event listener function?

Question

I'm having difficulties removing an event listener, since removeEventListener only works for non-anynomous functions I need to make a named function. The problem is I can't figure out how to pass the chart variable to the toggleLabels function without calling the function while I do it..

I tried looking at this question but no answer worked.

Is this possible?

var chart = {}; // Big object 

labelToggle.addEventListener('click', toggleLabels);

function toggleLabels(chart) {

    scope.graph.isLabelsVisible = chart.isLabelsVisible = !chart.isLabelsVisible;

    for (i = 0; i < length; i++) {
      chart.series[i].isLabelsVisible = !chart.series[i].isLabelsVisible;
      chart.series[i].hide();
      chart.series[i].show();
    };
  };

I usually use event listeners in the body of the html, and there, you can pass the arguments directly (`onclick='foo("toto")'` for example) — HolyDanna, Jul 28 '16 at 12:29
@HolyDanna That's horrible practice, and I can't do that unfortunately. — Chrillewoodz, Jul 28 '16 at 12:30
I know, but I try not to use much event listeners, any way. Maybe this post ( http://stackoverflow.com/questions/256754/how-to-pass-arguments-to-addeventlistener-listener-function#256763 ) can help you find a solution — HolyDanna, Jul 28 '16 at 12:32

score 1 · Answer 1 · answered Jul 28 '16 at 12:41

1

When passing parameters, you can use an "anonymous function" that calls the specified function with the parameters:

labelToggle.addEventListener("click", function() {
    toggleLabels(chart);
});

var a = 5;
var b = 7;
document.getElementById('btn').addEventListener("click", function() {
    myFunction(a, b);
});

function myFunction(x, y) {
    var result = x + y;
    console.log(result);
}

<button id="btn">Click here!</button>

answered Jul 28 '16 at 12:41

Kld

6,970
3
37
50

1

Does this allow unbinding of the event listener? – Chrillewoodz Jul 29 '16 at 04:34

score 0 · Answer 2 · answered Jul 28 '16 at 12:31

What you can do, is to make toggleLabels a function of chart. For example:

function chart(series) {
    this.series = series;  
    this.toggleLabels = function (name) {
    for (i = 0; i < lthis.series.ength; i++) {
      chart.series[i].isLabelsVisible = !this.series[i].isLabelsVisible;
      this.series[i].hide();
      this.series[i].show();
    };
    };
}

And then just operate on the chart object like this:

chart.series
chart.toggleLabels()

And then, you should be able to do the following:

 labelToggle.addEventListener('click', chart.toggleLabels);

score 0 · Answer 3 · answered Jul 28 '16 at 12:32

You can return a function like this:

var chart = {}; // Big object 

labelToggle.addEventListener('click', toggleLabels(chart));

function toggleLabelsCls(chart) {

    return function(chart) {
       scope.graph.isLabelsVisible = chart.isLabelsVisible = !chart.isLabelsVisible;

       for (i = 0; i < length; i++) {
         chart.series[i].isLabelsVisible = !chart.series[i].isLabelsVisible;
         chart.series[i].hide();
         chart.series[i].show();
       };
     }
  };

score 0 · Answer 4 · answered Jul 28 '16 at 12:33

0

It can be done by using partial application:

labelToggle.addEventListener('click', toggleLabels.bind(this,chart));

answered Jul 28 '16 at 12:33

Igorsvee

4,101
1
25
21

Yan Pak · Answer 5 · 2016-07-28T12:49:44.837

0

Here the shortest solution:

labelToggle.addEventListener('click', function(){toggleLabels(chart)});

edited Jul 28 '16 at 12:49

answered Jul 28 '16 at 12:34

Yan Pak

1,767
2
19
15

It's not global, it was just an example. It gets passed to an outer function. – Chrillewoodz Jul 28 '16 at 12:36
Oh, I see @Kld already answered like I am did. His solution is right. – Yan Pak Jul 28 '16 at 12:51

How to pass a variable to event listener function?

5 Answers5