Присоединение событий в JavaScript

Question

В качестве комментария к одному из вопросов здесь комментатор написал (выделение мое):

... Используя встроенный «onclick», вы делаете то же самое, но это сложнее поддерживать и более подвержено проблемам. Сообщество JavaScript в целом уже некоторое время отходит от встроенного JavaScript.

Это было связано с присоединением событий к элементам HTML с использованием

$("#someID").click(function(){
    do something here...;
});

, а не

<a id="someID" onclick="someFunction();">

Действительно ли произошел отход от старой школы способа объявления событий встроенными, и если да, то каковы преимущества одного из других?

РЕДАКТИРОВАТЬ Полагаю, было бы полезно включить ссылку на оригинальный вопрос . Был задан вопрос о присоединении отдельного события клика к каждой вкладке. Является ли мой ответ дерьмом и я должен извиниться перед FallenRayne =).

Answer 1

Большим преимуществом является разделение контента (html) и действия / поведения (javascript). Это известно как ненавязчивый JavaScript . Хранение этих разделенных облегчает их изменение, не затрагивая других.

Answer 2

Да, по крайней мере, в какой-то части сообщества есть неуверенные, как бы вы измерили это в целом.

Есть определенно преимущества, вне моей головы:

• Очиститель / Меньший код
• Проще отладить
• Легче изменить
• Проще упаковать
• Производительность

Из чистого объема, подумайте об этом:

<a onclick="someFunction();">
<a onclick="someFunction();">
<a onclick="someFunction();">
<a onclick="someFunction();">
<a onclick="someFunction();">

или это один раз :

$("a").click(someFunction);

Вы можете сделать это с большинством фреймворков через селектор css и т. Д., Обрабатывает много элементов одновременно. Это означает, что в коде сервера вы просто назначаете идентификаторы и классы, клиентскую часть проще обрабатывать отдельно. Например, проще отлаживать: в консоли я могу сделать $('a').unbind('click').click(...something new...);

Еще одним преимуществом является производительность . Если я смогу разделить это на отдельный .js файл, кэшированный клиентом, то это будет более тонкие веб-страницы и дополнительные данные, которые я не буду отправлять каждый раз. Меньшая веб-страница = более быстрая загрузка.

Вот еще один пример, рассуждающий о том, как это просто, предоставлено некоторое базовое действие через jQuery, но как это будет выглядеть с встроенными событиями?

$("li").hover(function() {
  $(this).children().slideToggle();
});

Для сравнения, это огромное количество встроенного кода, даже если вы пропустите часть анимации, это грязно (подумайте mouseenter/mouseleave, а не mouseover/mouseout ... первое, которое .hover() использует , сложнее)

Answer 3

Был ли действительно отход от старой школы объявления событий встроенными

Да, определенно, особенно с появлением таких каркасов JS, как jQuery, Prototype и т. Д., Которые поощряют объявлять события «новой школой».

и если да, каковы преимущества одного из других?

Одной из основных причин является разделение между структурой HTML и интеллектом программирования JavaScript (которые, возможно, do принадлежат разделенным). Это делает разметку намного, намного чище и проще в обслуживании, в то время как вся логика программирования хранится в отдельных файлах, что имеет преимущества в производительности при загрузке, а также лучшую управляемость - у вас есть надлежащие библиотеки, содержащие код, а не фрагменты кода JS повсюду.

Answer 4

С помощью встроенного объявления вы можете назначить только один обработчик событий, а из кода вы можете назначить столько, сколько пожелаете. Также, если вам нужно назначить один и тот же обработчик событий нескольким элементам, сделать это с помощью javascript проще и короче, и вы соблюдаете принцип DRY.