如何傳遞給事件監聽器函數的變量？

Question

我很難刪除一個事件監聽器，因爲removeEventListener只適用於我需要做非命名函數的非任意函數。問題是我不知道如何將chart變量傳遞給toggleLabels函數，而不用調用函數，而我這樣做。

我試過看this question，但沒有答案的工作。

這可能嗎？

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

Answer 1

你可以做的是讓toggleLabels成爲圖表的一個功能。例如：

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

然後只是chart對象像這樣進行操作：

chart.series 
chart.toggleLabels() 

然後，你應該能夠做到以下幾點：

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

Answer 2

您可以返回這樣的功能：

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

Answer 3

它可以通過使用partial application來完成：

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

Answer 4

這裏最短的解決方案：

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

Answer 5

在傳遞參數，你可以使用一個「匿名函數」調用與參數中指定的功能：

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>