Что плохого в навешивании событий на инпуты?

Question

[Максим Иванов]

Написал такой код, для добавления, удаления рамки у полей формы
Но мне сказали, что это не эффективно с точки зрения потребления памяти (если полей будет 100500)
Объясните, как правильно нужно вешать события на инпуты?

jsfiddle.net/omaxphp/xxmfxptz

<form id="formElement">
    One: <input type="text"><br>
    Two: <input type="text">
</form>

.focused {
    outline: solid 2px red;
}

// returns NodeList
var input_list = document.querySelectorAll('#formElement input'); 
// converts NodeList to Array
var input_array = Array.prototype.slice.call(input_list); 

input_array.forEach(function(input){
	
  input.onfocus = function(){
  	this.classList.add('focused');
  }
  
  input.onblur = function(){
  	this.classList.remove('focused');
  }
  
})

Answer 1

[IceJOKER]

используйте css www.w3schools.com/cssref/sel_focus.asp , зачем лишний раз юзать JS.

input:focus{
    outline: solid 2px red;
}

И зачем лишние операции, зачем превращать NodeList в массив? Перемудрили для такой простой задачи.

А насчет эффективности - если вы знаете примерно как работает код, то не важно, что под капотом, вы должны понимать, что это лишние операции - браузер сначала ищет все элементы удовлетворяющие условию(querySelector), потом все это дело превращает в массив, потом проходит по каждому элементу и вешает обработчик

Comments

[Максим Иванов]

ну, я как бы понимаю, что есть псевдоселектор у css, но была задача реализовать это на JS
и эффективно

[IceJOKER]

Максим Иванов: с использованием лишнего кода? я про превращение nodelist в array , эффективность - это когда используется минимум для получения максимума, грубо говоря

[Максим Иванов]

я вас понял, так и буду делать))

Answer 2

[trevoga_su]

не эффективно с точки зрения потребления памяти (если полей будет 100500)

код твой гумно, MaxKorz показал тебе как правильно.

Но вот насчет памяти - это кто такой умный, который о памяти в рамках скрипта на 5 строк рассуждает? Наверное какой-нибудь тим-лид, сидящий рядом?

Answer 3

[Myateznik]

Для такого случая лучше использовать обычный css код:

#formElement input:focus {
    outline: solid 2px red;
}

Не делайте лишних велосипедов, когда это уже давным давно сделано.
Это не эффективно из-за того, что в случае с css стилями при фокусе браузер просто нарисует элемент основываясь на уже известных данных тем самым происходит просто перерисовка тайлов, а в случае с js происходит изменение DOM, браузер снова проходит по всему дереву DOM, далее браузер ищет стили в CSSOM и только потом отрисовывает изменившееся, пока браузер совершает это путешествие возникает некий провис.

Comments

[Максим Иванов]

ну, я как бы понимаю, что есть псевдоселектор у css, но была задача реализовать это на JS
и эффективно

[Myateznik]

В таком случае можно попробовать это: https://jsfiddle.net/038pqmwn/