Когда можно вешать события на элементы?

Question

[Flash-Night]

Привет! Я новичок в js и jqery. Прошу объяснить, правильное ли у меня понимание работы DOM и JS - в скрипте обработчики событий (например, клик по кнопке) будут работать только внутри $(document).ready?
Т.е., условно, есть скрипт, в котором прописан следующий код:

$('#button1').on('click', function() { alert('Hi!'); });

Но если написать эту функцию не внутри $(document).ready, а просто в тегах , она отрабатывать не будет. Я правильно понимаю, что возможность навесить на элемент событие есть только после того, как отрисуется DOM (и это в принципе логично, потому что пока не отрисуется DOM, мы не будем знать, есть ли там нужный элемент)? А как быть, если мне надо в скрипте обойтись без $(document).ready, но динамически повесить событие на элемент?

jsfiddle.net/jvwgobst

Comments

[Ярослав Иванов]

Нет. Скорее всего у вас порядок скриптов другой. Подключайте скрипты в конце.

[ThunderCat]

если таких событий не много, можно повесить листенеры на

$(document).on('someEvent', 'someSelector',function(){
   // do some stuff
})

события будут слушаться на весь документ, но срабатывать только на таргетах входящих в указанные селекторы.

Answer 1

[Alex]

Как работает ваш пример:

$('#button1') // — Находит все елементы по селектору, которые в данный момент уже загружены
.on('click',  // На все найденные елементы навешывается обработчик события
function() {
  alert('Hi!');
});

По большому счету, скрипт, который работает с участком страницы, должен запускаться ПОСЛЕ того, как этот участок страницы будет загружен (в коде html, должен быть выше javascript).

Конструкция $(document).ready, позволяет не заботится о том, где именно находится ваш скрипт. С её помощью вы как бы говорите "Запусти мой код, когда вся страница будет загружена". И не важно, где сам скрипт находится. Даже если он в шапке, и запускается раньше, чем загрузется непосредственно сам html — его выполнение будет отложено.

Comments

[Stalker_RED]

только не "навешывается событие" а "навешивается функция, обработчик события"

[Alex]

Stalker_RED, Вы правы

Answer 2

[Андрей Охотников]

$(document).ready с некоторых пор не обязателен, можно это не писать.

Событие можно повесить через addEventListener

document.addEventListener('click', 'element', function() {})

Comments

[ThunderCat]

$(document).ready с некоторых пор не обязателен, можно это не писать.

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

Answer 3

[tyzberd]

Если без $(document).ready тогда после подключения jQuery и после того как на странице уже есть кнопка. Можно хоть так

<h1>Поиск</h1>
<input type="search" placeholder="Введите текст">
<button>Найти</button>
<script>
$('button').on('click', function() { alert('Hi!'); });
</script>

Answer 4

[Somewhere Intech]

1. Пока в document.body не будет добавлена #button1 - вешать не на что.
2. Пока не прогрузится jquery - $ не сработает.
Вы можете подгружать скрипт в конце разметки тела страницы, к примеру

<script></script>
</body>

Процесс отрисовки тут не при чем