• Пока дождешься DOMContentLoaded и, соответственно, применения связей событий - пройдет куча времени
• “Ссылки вида <a href=”javascript:saw(111)”> мне нравятся больше”
• Производительность инлайн-вставок JS будет выше
• и т.д.

По-моему вывод можно сделать один - многие люди не готовы принять этот подход - может, слишком сложно, может, еще что-то?.. Не знаю, не знаю..

Что такое Unobtrusive JavaScript

Unobtrusive JavaScript - это техника программирования на языке JavaScript, которая состоит из следующих принципов:

• разделения структуры (HTML) / оформления (CSS) и поведения (JavaScript)
• использование JavaScript для повышения удобства использования уже рабочего приложения
• применения техники Graceful degradation - если браузер не поддерживает те или иные функции, которые мы добавляем в приложение с помощью JavaScript - приложение всё равно остается рабочим

Зачем?

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

Как?

Легче всего показать это на примере. За ним далеко идти не нужно - возьмем всеми любимый Хабрахабр:

<div class="text_comments"> 

  <div class="comment_item" style="margin-left: 0px;">

    <div class="service_text_comments_holder">
      <a href="http://fxposter.habrahabr.ru/" class="comments_nickname">fxposter</a>
      ...
    </div>

    <div class="comment_text">...</div>

    <div class="comments_reply">
      <div class="reply_word_holder" id="reply_link866650">(<a href="javascript:saw(866650);">ответить</a>)</div>

        <div style="display: none" id="reply866650">
        <!-- форма отправки комментария -->
      </div>

    </div>
  </div>
</div>

Это код комментариев, которые показываются на страничке о посте. Для наглядности ненужные фрагменты были убраны.

Что плохо в этом фрагменте кода?

1. JavaScript идет вперемешку с HTML (<a href="javascript:saw(866650);">ответить</a>)
2. У людей с отключенным JavaScript’ом ответить на комментарий не получится в принципе

Как его можно улучшить?

1. Вынести “навешивание” событий в отдельный файл
2. Сделать так, чтобы при отключенном JavaScript’е пользователь перебрасывался на отдельную страницу, где бы он мог ответить на выбранный комментарий

Сказано - сделано. Преобразуем HTML к следующему виду:

<div class="text_comments"> 

  <div class="comment_item" style="margin-left: 0px;">

    <div class="service_text_comments_holder">
      <a href="http://fxposter.habrahabr.ru/" class="comments_nickname">fxposter</a>
      ...
    </div>

    <div class="comment_text">...</div>

    <div class="comments_reply">
      <div class="reply_word_holder" id="reply_link866650">(<a href="reply.php?comment_id=866650" class="show_reply_form" id="show_reply_form_866650">ответить</a>)</div>

        <div style="display: none" id="reply866650">
        <!-- форма отправки комментария -->
      </div>

    </div>
  </div>
</div>

Как видите - я изменил тег <a> (присвоил ему “нормальный” href, добавил id и class). Теперь при нажатии на ссылку “ответить” пользователя будет перебрасывать на страницу ответа на выбранный вопрос. Этим я выполнил второй пункт в списке улучшений. Теперь давайте взглянем на первый пункт: для того, чтобы у пользователей, у которых включен JavaScript вместо редиректа выполнялось открытие формы под самим комментарием мне нужно выбрать все элементы с классом “show_reply_form” и каждому из них назначить на событие onclick функцию, которая бы “открывала” соответствующую форму.

Напишем соответствующую функцию:

function showForm(event) {
  var id = parseInt(this.id.replace('show_reply_form_', ''));
  saw(id);
  return false;
}

Она берет this.id (т.е. id текущего обьекта), убирает из него “фразу” “show_reply_form_“, тем самым получая номер элемента, который нам нужно открыть и вызывает функцию saw, которая присутствовала изначально в HTML-коде. Для того, чтобы не произошел редирект после клика на ссылку - функция возвращает false.

Осталось только связать эту функцию с нашими ссылками.

В jQuery это делается так:

$('.show_reply_form').click(showForm);

В PrototypeJS - так:

$$('.show_reply_form').each(function(element) {
  element.onclick = showForm;
});

После присвоения нашей функции элементу - this.id станет относится к id этого элемента (да, это “магия JavaScript” :) ).

Весь JavaScript-код теперь можно вынести в отдельный файл:

function showForm(event) {
  var id = parseInt(this.id.replace('show_reply_form_', ''));
  saw(id);
  return false;
}

window.onload = function(event) {
  $$('.show_reply_form').each(function(element) {
    element.onclick = showForm;
  });
}

Здесь мы вызываем “связывание” наших ссылок с функцией показа формы при событии window.onload (при загрузке страницы).

Таким образом я выполнил и первый пункт в списке улучшений.

Выводы

На мой взгляд, такое использование JavaScript, а именно - вынос всех функций на JS в отдельный файл и связывание этих функций с элементами страницы с помощью различных событий (здесь мы видели события window.onload и element.onclick) - это на данный момент - единственно правильное использование JavaScript.

Дерзайте, господа. :)

PS. Я прекрасно знаю, что можно использовать событие не window.onload, а DOMContentLoaded. Но я считаю, что для примера понятнее будет всё же использование window.onload.