Javascript addEventListener 传递函数指针答案

【问题标题】：Javascript addEventListener passing function pointerJavascript addEventListener 传递函数指针
【发布时间】：2021-07-13 11:32:02
【问题描述】：

我喜欢将函数指针传递给 addEventListener 将使用的函数。如果你运行它，你会得到一个错误。
将函数指针（不知道如何调用）传递给 addEventListener 的“Javascript”方式是什么？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="UTF-8">
    <title>Title</title>

    <style>

</style>
<script>
var data = {
    "foo1" : "aaa",
    "foo2" : "bbb",
    "foo3" : "ccc"
}
var createLabel = function(mykey,func) {
    var label = document.createElement('label');
             label.innerHTML = mykey;
             label.id = "lbl_"+mykey;
             label.addEventListener("click", () =>{
                    self.func(mykey);
         }, false);
         document.getElementById("container2").appendChild(label);
         var br = document.createElement('br');
         document.getElementById("container2").appendChild(br);
};
var popolateDS = function() {
    self = this;
    var i = 0;
    for(var key in data) {
     (function () {
        var mykey = key;
        if (data.hasOwnProperty(key)) {
            if(i==0) {
                createLabel(key,dsOnClick1);
                i++;
            }
            createLabel(key,dsOnClick2);
        }
      }()); // immediate invocation
    }
}

var dsOnClick1 = function(key)  {
    alert("dsOnClick1 "+key);
}
var dsOnClick2 = function(key)  {
    alert("dsOnClick2 "+key);
}

</script>
</head>
<body>
<div id="container2">
</div>

<button onclick="popolateDS()">click</button>




</body>
</html>

【问题讨论】：

"不知道怎么调用"这叫做函数引用。
self.func(mykey) -> func(mykey)

标签： javascript html callback function-pointers addeventlistener

【解决方案1】：

您不需要将其称为self.func，您可以像下面这样调用func，它会按预期工作：

label.addEventListener("click", () =>{
  func(mykey);
}, false);

【讨论】：