Что лучший способ состоит в том, чтобы добавить событие в JavaScript?

Я полагаю, что второй метод обычно предпочитается, потому что он хранит информацию о действии (т.е. JavaScript) отдельный от разметки таким же образом, CSS разделяет презентацию от разметки.

Я соглашаюсь, что это делает немного более трудным видеть то, что происходит на Вашей странице, но хорошие инструменты как поджигатель помогут Вам с этим много. Вы также найдете намного лучшую поддержку IDE доступной, если Вы сведете смешивание к минимуму HTML и JavaScript.

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

Я думаю, что первый метод легче прочитать и поддержать

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

Объявление всех событий в одном центральном месте помогает организовать действия, происходящие на сайте. Если необходимо изменить что-то, что Вы не должны искать, все заказывает телефонный разговор с созданием к функции, просто необходимо изменить его в одном месте. При добавлении большего количества элементов, которые должны иметь ту же функциональность, Вы не должны помнить добавлять обработчики к ним; вместо этого, это достаточно часто, чтобы позволить им объявить класс, или даже не изменяют их вообще, потому что они логически принадлежат контейнерному элементу, которого все дочерние элементы соединены проводом к действию. Из фактического кода:

$$('#itemlist table th > a').invoke('observe', 'click', performSort);

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

Можно также использовать addEventListener (не в IE) / attachEvent (в IE).

Выезд: http://www.quirksmode.org/js/events_advanced.html

Они позволяют Вам присоединять функцию (или несколько функций) к событию на существующем Объекте DOM. Они также имеют преимущество разрешения невложения позже.

В целом при использовании серьезной суммы JavaScript может быть полезно сделать JavaScript читаемым, в противоположность HTML. Таким образом, Вы могли сказать это onclick=X в HTML очень ясно, но это - и отсутствие разделения кода - другой синтаксической зависимости между частями - и случая, в котором необходимо считать и HTML и JavaScript для понимания динамического поведения страницы.

Библиотеки как YUI и jQuery предоставляют методы для добавления событий только, после того как DOM готов, который может быть прежде window.onload. Они также удостоверяются, что можно добавить несколько обработчиков событий так, чтобы можно было использовать сценарии из других источников без различных обработчиков событий, перезаписывающих друг друга.

Таким образом, Ваш практический выбор;

Один. Если Ваш сценарий прост и единственный, который будет когда-либо работать на странице, создавать функцию init как так:

window.onload = function () {
    init();
}
function init() {
    // actual function calls go here
    doFoo();
}

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

Мое персональное предпочтение состоит в том, чтобы использовать jQuery во внешних js файлах, таким образом, js является абсолютно отдельным от HTML. JavaScript должен быть незаметным, таким образом, встроенный (т.е., первый пример) не действительно лучший выбор, по-моему. При рассмотрении HTML единственный знак, что Вы используете js, должен быть сценарием, включает в голову.

Пример присоединения (и обработка) события мог бы быть чем-то вроде этого

var myObject = {

    allLinkElements: null,  

    init: function()
    {
        // Set all the elements we need
        myObject.setElements();

        // Set event handlers for elements
        myObject.setEventHandlers();
    },

    clickedLink: function()
    {
        // Handle the click event
        alert('you clicked a link');
    },

    setElements: function()
    {
        // Find all <a> tags on the page
        myObject.allLinkElements = $('a');

        // Find other elements...
    },

    setEventHandlers: function()
    {
        // Loop through each link
        myObject.allLinkElements.each(function(id)
        {   
            // Assign the handler for the click event
            $(this).click(myObject.clickedLink);
        });

        // Assign handlers for other elements...
    }
}

// Wait for the DOM to be ready before initialising
$(document).ready(myObject.init);

Я думаю, что этот подход полезен, если Вы хотите сохранить все свои js организованными, поскольку можно использовать конкретные объекты для задач, и все приятно содержится.

Конечно, огромное преимущество разрешения jQuery (или другая известная библиотека) делает тяжелая работа - то, что перекрестная поддержка браузера (в основном) заботится, из которых делает жизнь намного легче