javascript - JavaScript 中匿名函数的替代方案

Question

document.addEventListener('DOMContentLoaded', function() {
  let input = document.querySelector('input');
  input.addEventListener('keyup', function(event) {
    let name = document.querySelector('#name');
    if (input.value) {
      name.innerHTML = `hello, ${input.value}`;
    } else {
      name.innerHTML = 'hello, whoever you are';
    }
  });
});

<form>
  <input autocomplete="off" autofocus placeholder="Name" type="text">
</form>
<p id="name"></p>

在上面的 HTML 页面中，they have使用匿名函数来查找 keyup 事件并用我们键入/输入的单词打招呼。

如何在不使用匿名函数的情况下实现此目的？到目前为止我已经尝试修改脚本，但无法识别 keyup 事件

function greet() {
  let name = document.querySelector("#name");
  let event = document.querySelector("input");
  if (event.value) {
    name.innerHTML = `HELLO ${event.value}`
  } else {
    name.innerHTML = `HELLO person`
  }
}

function listen() {
  let input = document.querySelector("input");
  input.addEventListener("keyup", greet);
}

document.addEventListener("DOMContentLoaded", listen);

Answer 1

您必须将 event 对象传递给事件处理函数，而不是尝试读取任意 DOM 元素，如下所示:

function greet(event)
{
   let name = document.querySelector("#name");

   if (event.target.value) {
         name.innerHTML = `HELLO ${event.target.value}`
   } else {
         name.innerHTML = `HELLO person`
   }
}

function listen()
{
   let input = document.querySelector("input");
   input.addEventListener("keyup", greet);
}

document.addEventListener("DOMContentLoaded", listen);

<div id="name">HELLO person</div>
<div>
  <input type="text" name="name" />
</div>