1

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

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>

4

3 回答 3

2

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

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

于 2017-08-19T17:22:19.110 回答
1

您的代码中有两个错误：

  • 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>

于 2017-08-19T17:23:09.100 回答
0

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

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

至

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

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

希望有帮助！

于 2017-08-19T17:32:00.633 回答