在脚本中添加单击事件侦听器不起作用答案

【问题标题】：Adding a click event listener in script not working在脚本中添加单击事件侦听器不起作用
【发布时间】：2026-01-14 00:40:01
【问题描述】：

我试图在单击时将文本框中的颜色从蓝色更改为红色，但是它始终是红色，事件侦听器由于某种原因无法正常工作。

function formFun() {
  var textBox1 = document.forms[0].elements[0];
  var textBox2 = document.forms[0].elements[1];

  var button1 = document.forms[0].elements[2];
  var button2 = document.forms[0].elements[3];

  textBox2.style.backgroundColor = "blue";
  button1.style.backgroundColor = "blue";
  button2.style.backgroundColor = "blue";

  button1.addEventListener("click", changeColor());

  function changeColor() {
    textBox1.style.backgroundColor = "red";
  }

}

<form name="mForm">
  <input type="text" name="in1">
  <input type="text" name="in2">
  <button name="butt1">click1</button>
  <button name="butt2">click2</button>
</form>

【问题讨论】：

如果你能做一个可运行的代码就好了，比如在jsfiddle等中

标签： javascript event-listener jquery-form-validator

【解决方案1】：

调用addEventListener时，需要传递一个函数作为第二个参数。但如果你仔细想想，你实际上是在传递函数调用的返回值。完全不同！

button1.addEventListener("click", changeColor); 是正确的用法。您正在告诉事件侦听器在事件进入时调用哪个函数。它会为您调用事件处理程序。将您的函数想象成您将传递给函数的任何其他变量。

【讨论】：

【解决方案2】：

你的代码有两个错误：

button1.addEventListener("click", changeColor()); 附加事件监听器时不能直接调用函数。您需要附加功能changeColor
您需要在脚本加载时调用函数formFun，以便将事件绑定到 dom 元素

function formFun() {
  var textBox1 = document.forms[0].elements[0];
  var textBox2 = document.forms[0].elements[1];

  var button1 = document.forms[0].elements[2];
  var button2 = document.forms[0].elements[3];

  textBox2.style.backgroundColor = "blue";
  button1.style.backgroundColor = "blue";
  button2.style.backgroundColor = "blue";

  button1.addEventListener("click", changeColor);

  function changeColor(e) {
  console.log("change");
    e.preventDefault();
    textBox1.style.backgroundColor = "red";
    
  }

}

formFun();

<form name="mForm">
  <input type="text" name="in1">
  <input type="text" name="in2">
  <button name="butt1">click1</button>
  <button name="butt2">click2</button>
</form>

【讨论】：

【解决方案3】：

您首先需要做的是调用函数 formFun() 并执行以下操作：

更正这行代码： button1.addEventListener("点击", changeColor());

到

button1.addEventListener("点击", changeColor);

您在这里注册了一个侦听器，因此您只指定函数名称，如 changeColor，而不是实际调用该函数的 changeColor()。

希望有所帮助！

【讨论】：