使用参数更改 innerHTML [重复]

Question

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

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