Должен ли этот код находиться в документе. Уже?

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

$(function(){ 
    $('#somediv').click(function(){ 

    }); 
}) 

<div id="somediv"> </div>

Внутри jQuery подключается к DOMContentLoaded и window.onload в качестве резервной копии. В случае IE делается попытка прокрутить область просмотра снова и снова до тех пор, пока не будет успешно.

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

$(document).keydown(function(e){
    if (e.which == 39) { 
       alert( "right arrow pressed" );
       return false;
    }
});

И как вы можете видеть, это работает. Я понимаю, так как этот код не подключается к каким-либо элементам документа, но сам документ, нет необходимости обертывать его в обработчик document.ready. Другая причина, по которой я не обертываю это, - это то, что я использовал то же самое в vanilla javascript, эквивалентом которого был бы код ниже, который также работает.

document.onkeydown= function(){
var keyCode = event.keyCode || event.which;   
    if (keyCode == 39) { 
       alert( "right arrow pressed" );
       return false;
    }
}

Я видел многочисленные сообщения, где люди обертывают его в document.ready, есть ли недостаток в том, чтобы не обернуть этот код в document.ready?

Также я думаю, что этот вопрос связан с моей недостаточной ясностью того, что происходит в это время, когда DOM строится, поэтому, если кто-то может объяснить, что происходит в течение периода непосредственно перед тем, как DOM готов. Для меня документ готов, когда html был проанализирован и преобразован в дерево DOM, или ему еще больше?

Вкратце, вот мои вопросы

  • При привязке обработчиков событий к document, это   необходимо поместить этот код в document.ready.
  • Есть ли недостатки, чтобы не обертывать код в document.ready?
  • Какая последовательность событий имеет место, когда документ создается, перед запуском document.ready?

Ответы

Ответ 1

Если вы привязываетесь к самому документу, вам не нужно ждать, пока он будет готов. Не должно быть никаких недостатков, чтобы не обернуть его в document.ready в этом случае.

document.ready запускается, когда событие DOMReady запускается браузером или когда конкретный тест выполняется для версий браузеров, которые не поддерживают событие DOMReady.

Дополнительная информация. (5/22/12)

В большинстве современных браузеров реализовано событие DOMContentLoaded, которое срабатывает, когда все элементы, определенные в документе, готовы к обработке с помощью javascript. Другие браузеры полагаются только на цикл setTimeout, который непрерывно проверяет readistate документа или связывается непосредственно с методом onreadystatechanged документа (взятым из jquery core). Сам документ готов к обработке до того, как javascript будет выполнен, поэтому вам не нужно ждать, когда привязывается непосредственно к документу.

Единственная проблема заключается в том, что если код взаимодействует с элементами, отличными от документа, есть вероятность, что событие может быть инициировано в документе до того, как эти элементы будут существовать. Очень маловероятно, чтобы это произошло, но это может произойти. Если это то, что может произойти с вашим кодом, тогда имеет смысл разместить его внутри $(document).ready(), чтобы предотвратить этот сценарий. Ваш образец не гарантирует размещения внутри $(document).ready().

Ответ 2

Точкой $(document).ready является выполнение кода после анализа всего документа.

Вам нужно использовать его только в том случае, если вы хотите использовать элементы, которые еще не существуют.
(например, если ваш script находится в <head>)

Если элементы, которые вы используете, уже существуют (либо потому, что они глобальны, либо потому, что ваш <script> находится ниже них), вам это не нужно.

Ответ 3

Единственным недостатком отсутствия привязки события к документу в блоке document.ready было бы то, что можно будет запустить событие до того, как будет загружено все содержимое страницы, что может быть не таким, каким вы хотите.

Ответ 4

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

Вы спросили:

  • При привязке обработчиков событий к самому документу, нужно ли поместить этот код в document.ready?
    • Ответ: Нет. При использовании кода, который полагается на значение свойств стиля CSS, важно ссылаться на внешние таблицы стилей или элементы стиля встраивания перед ссылкой на script, в котором находится ваш код или перед блоком document.ready().
  • Есть ли недостатки, чтобы не обертывать код в документе.
    • Ответ: Нет. Но когда вы должны создавать элементы в своих документах с помощью JavaScript, то следует ждать ради, пока ваш DOM не будет готов. Для этого вы должны поместить свой код внутри блока document.ready().
  • Какая последовательность событий имеет место, когда документ создается, непосредственно перед запуском document.ready?
    • Ответ. Перед тем как document.ready будет запущен, DOMContentLoaded уже запущен браузером.

Ответ 5

При использовании действий для элементов или их вызова (которые будут сгенерированы в DOM или еще не существуют) вам нужно использовать $(document).ready

Ответ 6

В дополнение к ответам: вы можете просто использовать функцию jquery live (вместо keydown и т.д.), чтобы освободиться от ситуации "элементы DOM должны быть закончены".

Итак, следующее должно работать правильно:

$( "#somediv" ).live( 'keydown', function(){ ... } );

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

Итак, ответ на результат: no, вам не нужно размещать свой код в документе. Уже при использовании указанной функции.

Обновление

В последних версиях jQuery ( >= 1.7) используйте on() вместо live(), потому что последний лишен. Таким образом, нет необходимости помещать привязки событий в ready().

Ответ 7

1. При привязке обработчиков событий к самому документу необходимо ли поместить этот код в document.ready?

Нет. Фактически, методы 'on' для привязки в JQ могут делегировать в документе, чтобы вы могли в любое время использовать их в любом элементе, если не было много барботажа, останавливающегося в элементах контейнера с stopPropagation.

2. Есть ли недостатки, чтобы не обертывать код в документе. Уже?

Только те скрипты в голове могут попытаться ударить HTML, которого еще нет. Обратное заключается в том, что HTML может быть готов и получать события от пользователя перед документом. См. Методы 'on' или делегирование событий Google за то, что вы используете ваш торт и едите его там, где происходят события (оговорка - это библиотеки, которые глупо используют stopPropagation). document.ready - это всего лишь способ убедиться, что ваш код стреляет, когда HTML готов к удару. Это не обязательно для кода, который падает в нижней части тега тела, если только (возможно) вы сами что-то нанесете на себя.

3. Какая последовательность событий имеет место, когда документ создается, непосредственно перед запуском document.ready?

В тот момент, когда готов документ, все теги разобраны, а размеры макета установлены. Изображения не обязательно должны быть полностью загружены, и я только догадываюсь, но я подозреваю, что не-макет, влияющий на CSS, может показываться не в некоторых браузерах. Элемент считается "готовым", когда его закрывающий тег был прочитан и исполнен парсером HTML. JS в тегах script должен обрабатываться интерпретатором до того, как синтаксический анализ HTML может продолжаться, поэтому мы склонны поместить наш код в нижней части документа в настоящее время в любом случае для более быстрого восприятия времени загрузки.