JavaScript & Events - лучшая практика

Question

Однажды я прочитал, что следующая техника кодирования считается плохой:

<a HREF="page.htm" onClick="alert('Hello World')">text link</a>

По сути, использование этих обработчиков событий (например, onClick) в теге HTML - неправильный подход к использованию.Что является причиной этого?Как называется эта «плохая» техника?Каков «правильный» способ сделать это?

Answer 1

пара причин. По сути, это псевдоним интерфейса DOM Level 1 element.onclick, который допускает только одного прослушивателя событий.

Другая причина в том, что это просто философски неправильно. Это приводит к плохо организованному коду: вы смешиваете декларативный язык с функциональным языком, который включает в себя огромное количество логики при его исполнении.

Правильный путь будет:

element.addEventListener('click', function() {
  console.log('hello world');
}, false); // required for old gecko

Или в IE:

element.attachEvent('onclick', function() {
  console.log('hello world');
});

или, по крайней мере, очень , используйте модель DOM уровня 1:

element.onclick = function() {
  console.log('hello world');
};

(Также обратите внимание, что alert - это плохая практика, она блокирует выполнение всей страницы.)

Другая причина заключается в том, что вы не получаете доступ к какому-либо объекту события, который вы обычно получаете в качестве первого аргумента обратного вызова слушателя. (Вы, по сути, находитесь внутри колбэка при установке атрибутов [event], поэтому я не уверен, можете ли вы использовать аргументы [0] или как различные механизмы рендеринга реализуют его. Это очень неудобно, поэтому лучше связывать события в JS-земле.)

Последняя причина, по которой я могу придумать, - это совместимость с разными браузерами. Вы никогда не сможете нормализовать интерфейс событий для себя, если привязываете события в HTML.

Answer 2

Это встроенный атрибут обработчика событий .(+1 ответ ЧДЖ за альтернативы).Обычно это считается «плохим» по ряду причин:

• вы смешиваете небольшие фрагменты синтаксиса JavaScript, встроенного в синтаксис HTML:

  • когда у вас их много, особенно если у вас много элементов, которые содержат практически один и тот же бит кода, его сложнее читать и поддерживать;

  • вы получаете вложенный-выходУжасы, когда вам нужно использовать специальные символы HTML в вашем коде:

например:

<a href="x.html" onclick="this.innerHTML= '&lt;em>I like &quot;fish &amp;amp; chips&quot;&lt;/em>';">

• свойства целевого элемента и всех узлов-предков становятся переменными, потенциально скрывая ваши собственные переменные с одинаковыми именами.См. этот вопрос , чтобы узнать об этом удивительном и почти всегда нежелательном поведении;

  • это приводит к жуткой несовместимости, так как браузеры имеют различные свойства DOM;

  • и будущие браузеры, представляющие новые свойства, потенциально могут испортить ваш код.

Answer 3

Лучший подход называется ненавязчивый JavaScript , и он в основном означает отделение поведения (JS) от структуры (HTML), аналогично тому, как CSS представляет собой отделение представления от структуры, а также по тем же причинам..

Answer 4

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

Лучшая практика - прикреплять событие следующим образом:

window.onload = function() {
    document.getElementById("MyLink").onclick = function() {
        alert('Hello World');
        return false;
    }
}

Например, указав идентификатор ссылки MyLink.