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