Производительность Javascript? - Поместить события в тег HTML или связать их?

Question

Мне интересно, что лучше для производительности ... У меня есть что-то вроде "веб-приложения". В нем много JavaScript. Когда кнопка нажата, скрытый div становится видимым. Этот новый div имеет 5 кнопок. Что лучше для производительности:

1.) Поместите события нажатия кнопки в тег html каждой кнопки, например onClick = "alert ('hey');" 2.) Прикрепить события к каждой кнопке, когда div виден, а затем удалить события, когда я скрываю div, содержащий кнопки?

Причина, по которой я спрашиваю, заключается в том, что я думаю, что страница может застрять, если события в HTML-тегах постоянно присутствуют. Я полагаю, что страница может быть быстрее, чтобы иметь те события, только когда пользователь может видеть кнопки, нажимая их.

Любая помощь - это здорово! Спасибо!

Answer 1

Я бы использовал делегирование события .

Таким образом, вы можете свободно добавлять / удалять любые кнопки, не беспокоясь о добавлении событий на каждую из них. Этот подход также более эффективен, поскольку у вас всегда есть один обработчик событий вместо N непосредственно на каждой кнопке.

Answer 2

Сохранение обработчиков событий, зарегистрированных, когда элементы скрыты, не повлияет на производительность, так как события не сработают.

Использовать ли атрибуты HTML или DOM для регистрации обработчиков событий - это не вопрос производительности, это вопрос чистого дизайна. Вы хотите сохранить презентацию как можно более отдельно от поведения. Это означает, что если вы используете атрибуты, они должны только связывать событие с обработчиком (то есть вызывать одну функцию), а не содержать более сложный код. То есть не:

<button onclick="if ('red'==this.parent.style.backgroundColor) {...}">...</button>

сделать:

<button onclick="clickColorButton(event)">...</button>

Answer 3

Если эти события не приводят к тому, что что-то действует как ссылка (которую, похоже, Google научился читать), поместите весь этот JS за пределы вашего HTML. Это делает ваш код аккуратнее и удобнее в обслуживании. Не могу быть уверен в производительности.