javascript - 将 JS 函数和事件监听器应用于多个 html 元素

Question

我正在创建一个表单，我在下面进行了简化以直截了当，JS代码是控制占位符；隐藏在焦点上并重新出现在模糊上，显然这现在仅适用于带有 id('Name') 的输入。如何将这些函数应用于所有输入元素 DRY 而无需为每个输入重复代码。

var x = document.getElementById("Name");
x.addEventListener("focusin", myFocusFunction);
x.addEventListener("focusout", myBlurFunction);

function myFocusFunction() {
    document.getElementById('Name').placeholder= '';  
}

function myBlurFunction() {
    document.getElementById('Name').placeholder= 'Name';  
}

<div id='card'>
    <input id='Name' type='text' placeholder='Name'/>
    <input id='Age' type='text' placeholder='Age'/>
    <input id='Sex' type='text' placeholder='Sex'/>
    <input id='Occupation' type='text' placeholder='Occupation'/>
</div>

Answer 1

Array.from(document.getElementsByTagName("input")).forEach(input => {

  input.addEventListener("focusin", focus);
  input.addEventListener("focusout", blur.bind(input, input.placeholder));

});


function focus() {
  this.placeholder = '';
}

function blur(placeholder) {
  this.placeholder = placeholder;
}

<div id='card'>
  <input id='Name' type='text' placeholder='Name' />
  <input id='Age' type='text' placeholder='Age' />
  <input id='Sex' type='text' placeholder='Sex' />
  <input id='Occupation' type='text' placeholder='Occupation' />
</div>

使用 this 关键字，您可以访问触发事件的对象。

此外，您还需要以某种方式保留占位符，在上面的示例中，我使用了绑定(bind)函数，但您可以选择自己的方式。

您还可以在 revision 2 中找到如何手动指定名称的示例。这个答案。