Javascript addEventListener 传递函数指针

问题描述

我喜欢传递给 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，您可以像下面那样调用 func，它会按预期工作：

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

callback callback function-pointers html javascript