Добавить события (например, размытие) для несколькихэлементы (настоящее и будущее) - PullRequest
Новая
       45

Добавить события (например, размытие) для несколькихэлементы (настоящее и будущее)

0 голосов
/ 10 октября 2018

Случай:

На сайте (скажем, это список дел) есть несколько <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)?Для уже существующих и созданных в будущем.

1 Ответ

0 голосов
/ 10 октября 2018

Вы можете использовать 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>
...