javascript - 使用参数更改innerHTML

Question

这个问题已经有答案了:

How to pass some parameters to function called in addEventListener? [duplicate] (1 个回答)

已关闭 5 年前。

我尝试通过将鼠标悬停在段落上来更改它。

HTML

<p id="foo"> Hello world! </p>

Javascript

var foo = document.getElementById("foo");
foo.addEventListener("mouseover", ChangeText("Goodbye world!"));

function ChangeText(s) {
    this.innerHTML = s;
}

然而，该段落在悬停时不会改变。当省略参数并直接输入字符串时，如下所示，它确实有效。为什么？

var foo = document.getElementById("foo");
foo.addEventListener("mouseover", ChangeText);

function ChangeText() {
    this.innerHTML = "Goodbye world!";
}

Answer 1

addEventListener 想要一个函数作为第二个参数；因此，如果您调用带有参数的函数，您可以编写:

foo.addEventListener("mouseover", function(event){
        ChangeText("Goodbye world!",event.target)
     });

function ChangeText(s,target) {
    target.innerHTML = s;
 }