javascript - 使用 HTML DOM 分配事件

Question

我正在使用 EasyJavaScript 应用程序学习 JavaScript。我正在修改所提供的示例，以便确定我是否真正理解它们。目前，我想为按钮分配特定功能，而不在该按钮内放置 onclick 。

HTML:

<p>Test paragraph</p>
<button id="bg1">Button with function assigned</button>

Javascript:

function bgChange() {
    document.getElementById("bg1").onclick = changeBG;
}

function changeBG() {
    document.body.style.backgroundColor = "black";
    document.body.style.color = "white";
}

调试器什么也没显示。请解释我哪里犯了错误或者我的思维方式有什么问题。

Answer 1

定义函数不会运行它们。所以你必须调用他们，让他们做你想做的事。在您的示例中，您必须在某处调用 bgChange() 。

可以这样做。

function bgChange() {
    document.getElementById("bg1").onclick = changeBG;
}

function changeBG() {
    document.body.style.backgroundColor = "black";
    document.body.style.color = "white";
}

bgChange();

<p>Test paragraph</p>
<button id="bg1">Button with function assigned</button>
   

定义函数就像将您的 friend 添加到电话簿中一样。如果你需要他提供什么东西，你首先要调用他，并传入他需要的参数，然后他就会返回你需要的东西。