Вопрос по jquery, javascript – Этот код должен быть в документе.

32

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

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

    }); 
}) 

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

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

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

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

И, как вы можете видеть, этоработает, Насколько я понимаю, поскольку этот код не подключается к каким-либо элементам в документе, но сам документ, нет необходимости заключать его вdocument.ready обработчик. Другая причина, по которой я не оборачиваюсь, заключается в том, что я делал то же самое в ванильном 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 будет готов. Для меня документready когда html был разобран и преобразован в дерево DOM, или есть что-то еще?

В заключение, вот мои вопросы

When binding event handlers to the document itself, is it necessary to put that code in a document.ready. Are there any downsides to not wrapping the code in the document.ready ? What sequence of events take place when the document is being constructed, right before the document.ready is fired ?
Oop. Не делегирование. NM Erik Reppen

Ваш Ответ

7   ответов
11

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

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

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

4

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

Ты спросил

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

удут сгенерированы в DOM или еще не существуют), вам нужно использовать$(document).ready

1

прямой эфи функция (вместо нажатия клавиш и т. д.), чтобы освободить от ситуации «элементы DOM должны быть завершены

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

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

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

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

Обновит

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

@ Silkster Спасибо за информацию! sergzach
jQuery.live () устарела в более поздних версиях jQuery. Заменяется на jQuery.on (), jQuery.off () и jQuery.one (). По крайней мере, лучше использовать jQuery.delegate (). По состоянию на v1.7 за Api.jquery.com / жить Silkster
$(document).live("keydown",fn) это то же самое, что и$(document,document).keydown(fn), или$(document).keydown(fn) Kevin B
@ KevinB В документах сказано, что это не так (далее речь идет о прямом эфире): «Присоединить обработчик событий для всех элементов, которые соответствуют текущему селектору, сейчас и в будущем. " sergzach
sergzach, это правда, когда вы делегируете событие для элемента, например,$('.somediv').live('click'..., если.somediv вставляется в будущем, тогда событие также будет привязано к этому элементу, но в этом случае мы присоединяем событие к самому документу, а не к элементу внутри документа.So $(document).keyup эквивалентно$(document).live('keyup',... aziz punjani
33

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

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

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

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

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

5

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

1

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

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

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

Только то, что скрипты в голове могут попытаться поразить HTML, которого еще нет. И наоборот, HTML может быть готов и получать события от пользователя до того, как документ будет готов. См. «On» методы или google «делегирование событий», чтобы получить свой торт и съесть его, когда речь идет о событиях (предостережение - библиотеки, которые тупо используют stopPropagation). document.ready - это всего лишь способ убедиться, что ваш код запускается, когда HTML-код готов к попаданию. В коде, который находится внизу тега body, нет необходимости, если (возможно) вы не нажмете на себя bod

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

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

Похожие вопросы