Использование функции jQuerys document.Ready для прикрепления событий к элементам - PullRequest
Новая
       2

Использование функции jQuerys document.Ready для прикрепления событий к элементам

3 голосов
/ 01 июля 2010

Нормальный стиль 

<a href="#" id="myLink" onclick="myFunc();">click me</a>

function myFunc() {
    alert('hello!');
}

jQuery style 

<a href="#" id="myLink">click me</a>

$(document).ready(function() {
    $("#myLink").click(function() {
        alert('hello!');
    });
});

Я только начал использовать jQuery, но мне интересно, в чем разница между этими двумя. Я должен предпочесть метод jQuery? Есть ли какие-либо преимущества при этом?

Имхо, мне не нравится, что при чтении html с помощью метода jQuery нет никакого понятия о том, что делает ссылка. Я обнаружил, что метод присоединения jQuery действительно полезен при присоединении к нескольким элементам (например, $("#myTable tr").click(function(e) {...});), но при работе с единичным элементом я не знаю, какой мне следует использовать.

Ответы [ 4 ]

4 голосов
/ 01 июля 2010

Мне нравится второй подход, по нескольким причинам.

  1. Он хранит все содержимое javascript в одном месте;вы правы в том, что когда вы читаете HTML, вы не знаете, что будет делать нажатие на ссылку, но, с другой стороны, если вы определяете встроенный обработчик событий, то когда вы читаете javascript, вы не знаете, когдафункция будет вызвана.Мне нравится держать мои «слои» как можно более разделенными.

  2. Это способствует тому, что иногда называют « ненавязчивым javascript », а также постепенному ухудшению вашегоприложение.Идея постепенной деградации (или «прогрессивного улучшения») состоит в том, что вы делаете ссылку реальной ссылкой, которая ведет на отдельную страницу, но затем вы используете javascript для захвата события click и предоставления той же функциональности, не покидая страницу.Таким образом, если у пользователя нет javascript (скажем, он является отключенным пользователем, использующим программу чтения с экрана), приложение все еще работает.

  3. Это делает javascript более пригодным для повторного использования;скажем, я определяю элемент для привязки моего обработчика событий на основе чего-то общего, такого как класс CSS.Затем я могу поместить этот javascript на множество страниц и заставить его «просто работать».Я делаю это все время для таких вещей, как автосохранение, например.

1 голос
/ 01 июля 2010

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

По сути, я помещаю в пространство имен события click, hover, mouseover и т. Д., А затем вызываю события пространства имен в моем document.ready. Причиной этого является то, что я могу просматривать все мои события щелчка, наведения мыши при наведении курсора из одного места. 

<script type="text/javascript">

  var Page1 = {
    Events: {
       click: {
         elementid: {
           func: function(evt) {  //where elementname is the id of your element
           //your code here
           },
           selector: "#someId"
         }
         elementclass: {
           func: function(evt) { //where elementclass is the class of your element(s)
           //your code here
           },
           selector: ".someClass"
         },
       mouseover: {
         //similar to click namespace
       },
       mouseout: {
         //similar to click namespace
       },
       ....
    }
  };

  $(document).ready(function() {
    for (var key in Page1.Events) {
      for (var eventKey in Page1.Events[key]) {
        $(Page1.Events[key][eventKey].selector).bind(key, Page1.Events[key][eventKey].func);
      }
    }
  });

</script>

Теперь приятно отметить, что вы просто добавляете события в свое пространство имен, и они автоматически подключаются к документу. Вы также можете заменить вызов $ .bind на Live или делегировать для подключения к будущим элементам dom.

0 голосов
/ 01 июля 2010

Имхо мне не нравится, что при чтении html с помощью метода jQuery нет понятия о том, что делает ссылка.

Браузер с отключенным JavaScript не знаетВаша ссылка тоже.Они видят ссылку, указывающую на верхнюю часть документа!

В других ответах уже есть ряд причин, чтобы избежать событий в стиле onclick в вашем HTML ... Я также стараюсь изо всех сил избегать <a href="#"> ссылки в моем HTML, гарантирующие, что любые <a> теги в документе имеют цель.Я буду часто использовать jQuery для создания дополнительных тегов <a> для добавления функциональности , только если браузер позволит мне обрабатывать события нажатия на них

0 голосов
/ 01 июля 2010

Способ обработки событий в JQuery определен ненавязчиво (http://en.wikipedia.org/wiki/Unobtrusive_JavaScript)) и обычно предпочтительнее «стандартного», поскольку у вас четкое разделение между логикой и представлением, и, как правило, код более пригоден для повторного использования.

Не говоря уже о том, что JQuery (но другие библиотеки тоже делают то же самое) обрабатывает несоответствия браузера для вас.

...