@Flash-Night

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

Привет! Я новичок в js и jqery. Прошу объяснить, правильное ли у меня понимание работы DOM и JS - в скрипте обработчики событий (например, клик по кнопке) будут работать только внутри $(document).ready?
Т.е., условно, есть скрипт, в котором прописан следующий код:
$('#button1').on('click', function() { alert('Hi!'); });

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

jsfiddle.net/jvwgobst
  • Вопрос задан
  • 363 просмотра
Решения вопроса 1
Kozack
@Kozack Куратор тега JavaScript
Thinking about a11y
Как работает ваш пример:
$('#button1') // — Находит все елементы по селектору, которые в данный момент уже загружены
.on('click',  // На все найденные елементы навешывается обработчик события
function() {
  alert('Hi!');
});


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

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

Событие можно повесить через addEventListener
document.addEventListener('click', 'element', function() {})
Ответ написан
@tyzberd
Если без $(document).ready тогда после подключения jQuery и после того как на странице уже есть кнопка. Можно хоть так
<h1>Поиск</h1>
<input type="search" placeholder="Введите текст">
<button>Найти</button>
<script>
$('button').on('click', function() { alert('Hi!'); });
</script>
Ответ написан
Комментировать
john36allTa
@john36allTa
alien glow of a dirty mind
1. Пока в document.body не будет добавлена #button1 - вешать не на что.
2. Пока не прогрузится jquery - $ не сработает.
Вы можете подгружать скрипт в конце разметки тела страницы, к примеру
<script></script>
</body>

Процесс отрисовки тут не при чем
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы