Question

案例：

在网站上（例如，待办事项列表），有多个<input class="awesome-input" type="text"/>元素。也可以添加具有相同类的下一个输入。

HTML示例：

<button class="add-input">Add new awesome input</button>
<div class="inputs-container">
   <input class="awesome-input" type="text"/>
   <input class="awesome-input" type="text"/>
   <input class="awesome-input" type="text"/>
</div>

问题：

是否可以将输入事件（例如，模糊）添加到多个元素（纯JavaScript）？到已经存在并为将来创建。

Answer 1

您可以使用Array.map（）遍历inputs数组，并用blur事件对其进行标记。

而且，当添加新的input时，您也可以在其中执行相同的操作。

window.onload = function() {
  var inputs = Array.from(document.querySelectorAll('input.awesome-input'));
  var button = document.querySelector('button');
  
  function blurHandler(elem) {
    elem.style.border = '2px solid #DDD'; // just an example
  }
  
  inputs.map( input => input.addEventListener('blur', event => blurHandler(event.target)) );
  
  button.addEventListener('click', function() {
    var input = document.createElement('input');
    
    input.addEventListener('blur', event => blurHandler(event.target));
    
    input.className += ' awesome-input';
    document.querySelector('.inputs-container').appendChild(input);
  });
}

<button class="add-input">Add new awesome input</button>
<div class="inputs-container">
   <input class="awesome-input" type="text"/>
   <input class="awesome-input" type="text"/>
   <input class="awesome-input" type="text"/>
</div>

将事件（例如模糊）添加到多个<input />元素（现在和将来）

1 个答案: