javascript - 向多个 <input/> 元素(现在和 future )添加事件(例如模糊)

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>