时间戳

首页 > 解决方案 > Javascript - 如何获取触发事件的元素

javascript - Javascript - 如何获取触发事件的元素

问题描述

使用来自 W3schools 的示例代码，我正在尝试设置一个事件处理程序，当表单中的多个“输入”元素中的任何一个发生更改时，该处理程序将触发。

我想要的是接收<input name=xxxx>名称参数据我了解，p1 和 p2 应该包含事件和<input name=xxxx>触发事件的字段的名称。相反，我从事件处理程序中得到一个参考错误，“p1 is not defined”。在搜索中，我发现了许多关于这个问题的复杂解决方案，其中一些我不明白，但没有一个能真正解决我的问题。我究竟做错了什么？

function field_check(event) {
  var the_input = event.target.id;

  alert("field_check: event was: " + event + "\nand the entry field was: " + the_input);
}

document.getElementById("add_data").addEventListener("change", field_check);
input {
  background-color: lightblue;
}

input:focus {
  background-color: yellow;
}
<form name=add_data id=add_data>
  <input type="text" class="ship" name="fname" id="fname" autofocus><br \>
  <input type="text" class="ship" name="lname" id="lname" required><br />
  <input type="text" class="ship" name="addr1" id="addr1"><br />
  <input type="text" class="ship" name="addr2" id="addr2"><br />
  <input type="text" class="ship" name="city" id="city"><br />
  <input type="text" class="ship" name="p_code" id="p_code">
</form>

标签： javascriptevents

解决方案

你的意思是做

var s = document.getElementById("add_data");
s.addEventListener("change", function(event) {
  field_check(event, event.target.name);
});

甚至更简单

document.getElementById("add_data").addEventListener("change", field_check);

并且有

function field_check(event) {
  console.log(event.target.name);
}


function field_check(event) {
  console.log(event.target.name);
}

document.getElementById("add_data").addEventListener("change", field_check);
input {
  background-color: lightblue;
}

input:focus {
  background-color: yellow;
}
<form name=add_data id=add_data>
  <input type="text" class="ship" name="fname" id="fname" autofocus><br \>
  <input type="text" class="ship" name="lname" id="lname" required><br />
  <input type="text" class="ship" name="addr1" id="addr1"><br />
  <input type="text" class="ship" name="addr2" id="addr2"><br />
  <input type="text" class="ship" name="city" id="city"><br />
  <input type="text" class="ship" name="p_code" id="p_code">
</form>

推荐阅读