Должен ли я использовать встроенные или проводные обработчики событий

Question

ОК, так что предпочтительнее / правильнее или когда следует использовать одно над другим, а также преимущества / недостатки использования следующего:

<a href="#" id="hypMyLink" onClick="myFunc();">a link</a>

<script>
    function myFunc(){
        //do something
    }
</script>

ИЛИ *

<a href="#" id="hypMyLink">a link</a>

<script>
    $(function() {
        $('#hypMyLink').click(function(e) {
            //do something
        });            
    });
</script>

Заранее спасибо!

Answer 1

В идеальном мире разметки - все вещи семантические, вы бы разделили вашу разметку, стилизацию и javascript в их соответствующие файлы.

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

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

Answer 2

Ненавязчивый (т. Е. JavaScript, встроенный в разметку HTML вне тегов <script>) - это путь.Зачем?По нескольким причинам:

Это усиливает разделение интересов.Почему ваш HTML должен заботиться о поведении?

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

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

Answer 3

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

Например, представьте, что вы получаете список местоположений и заполнитель, исоставить список ссылок на эти места и всплывающее окно с названием места при нажатии на него.Вот пример того, как это сделать:

function alertGenerator(loc) {
  return function() {alert("Hi, I'm visiting " + loc);};
}

function createLocationList(locations, placeholder) {
  // Create a jQuery wrapper for placeholder
  var $placeholder = $(placeholder),
    loc,
    location,
    $link; 
  // loop over the locations, create a link for each iteration
  for (var loc in locations) if locations.hasOwnProperty(loc) {
    location = locations[loc];
    $link = $("<a>");
    $link.text(location).click(alertGenerator(location));
    $placeholder.append($link);
  }    
}

Если бы вы попытались сделать это с помощью атрибута onclick, у вас возникли бы две большие проблемы.Во-первых, вы будете иметь дело главным образом со строками, а не с реальными функциями и элементами DOM (или объектами jQuery).Подобный код, по моему опыту, намного сложнее отлаживать.

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