Каков наилучший способ добавить событие в JavaScript? - PullRequest
Новая
       26

Каков наилучший способ добавить событие в JavaScript?

8 голосов
/ 29 августа 2008

Я вижу 2 основных способа установки событий в JavaScript:

  1. Добавить событие непосредственно внутри тега, например:

    <a href="" onclick="doFoo()">do foo</a>

  2. Установите их с помощью JavaScript следующим образом:

    <a id="bar" href="">do bar</a>

и добавьте событие в раздел <script> внутри раздела <head> или во внешний файл JavaScript, например, если вы используете prototypeJS : 

Event.observe(window, 'load', function() {
    $('bar').observe('click', doBar);
}

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

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

Какой метод лучше?

Убийственный ответ будет полностью оценен!

Ответы [ 6 ]

9 голосов
/ 29 августа 2008

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

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

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

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

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

3 голосов
/ 29 августа 2008

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

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

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

3 голосов
/ 29 августа 2008

По моему опыту, здесь есть два основных момента:

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

2) Второй вид, то есть Event.observe() имеет преимущества, когда одно и то же или очень похожее действие выполняется для нескольких событий, потому что это становится очевидным, когда все эти вызовы находятся в одном и том же месте. Также, как указал Конрад, в некоторых случаях это может быть выполнено одним вызовом.

1 голос
/ 29 августа 2008

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

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

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

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

0 голосов
/ 29 августа 2008

Мое личное предпочтение - использовать 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 (или другая хорошо известная библиотека) выполняет тяжелую работу, заключается в том, что кросс-браузерная поддержка (в основном) заботится о том, что делает жизнь намного проще

0 голосов
/ 29 августа 2008

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

Итак, ваш практический выбор:

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

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

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

...