在脚本中添加点击事件监听器不起作用

Question

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

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>

Answer 1

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

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

Answer 2

您的代码中有 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>

Answer 3

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

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

至

button1.addEventListener("click", changeColor);

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

希望有所帮助！

在脚本中添加点击事件监听器不起作用

Adding a click event listener in script not working

javascript

event-listener

jquery-form-validator