Javascript addEventListener 传递函数指针

Question

我喜欢将函数指针传递给 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>

Answer 1

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

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

Javascript addEventListener 传递函数指针

Javascript addEventListener passing function pointer

javascript

html

callback

function-pointers

addeventlistener