Вставка javascript внутри HTML

Question

У меня есть два вопроса по размещению JS внутри HTML. Я не могу найти ответы на эти два вопроса here.

Вопросы в основном

• Скажем, я поставил Javascript в голове, и говорят, что скрипт пытается получить некоторый HTML-элемент по ID и зарегистрировать обработчик щелчка для него. Теперь, поскольку HTML еще не загружен (потому что скрипт вызван в голове), будет ли это работать?
• С другой стороны, если зарегистрировать функцию в голове, которая вызывается при загрузке DOM, и внутри этой функции я помещаю код, который регистрирует обработчик для нажатия на какую-либо кнопку, тогда, поскольку я понимаю, что пользователь имеет шанс нажать кнопку, но обработчик не будет вызван, потому что весь DOM еще не загружен (и именно там зарегистрирован обработчик нажатия кнопки). Я прав?

Какое решение и лучший способ разместить Javascript в HTML, считая выше двух пунктов?

Answer 1

Скажем, я поставил Javascript в голове, и говорят, что скрипт пытается получить HTML-элемент по ID и зарегистрировать обработчик щелчка для него. Теперь , так как HTML еще не загружен (потому что скрипт называется в голове), будет ли это работать?

Нет, это не сработает. Всякий раз, когда отображается тег <script>, javascript выполняется прямо перед тем, как продолжить работу с DOM-зданием. (если javascript является внешним, он будет ждать, чтобы получить его по сети и выполнить его) Он будет действовать на текущий снимок DOM, если javascript использует DOM API, например getElementById. Когда скрипт пытается получить элемент по id, он пытается получить его из DOM (все DOM API действуют на DOM), который сейчас создается. Поскольку элемент еще не добавлен в DOM (мы обрабатываем голову), он не сможет получить элемент. Поскольку он не может получить элемент, он будет вызывать ошибку, если вы попытаетесь получить доступ к addEventListener или onclick из null.

С другой стороны, если зарегистрировать функцию в голове, которая вызывается, , когда DOM загружен, и внутри этой функции я поставил код, который регистрирует обработчик мыши на какой-то кнопки, то, как я понимаю, пользователь имеет шанс щелкнуть кнопку, но обработчик не будет вызван, потому что весь DOM еще не загружен (и это то, где зарегистрирована кнопка click ). Я прав?

Да, вы в порядке. Загрузка DOM обобщает условие добавления всех элементов в DOM и готова к любой операции над любым элементом, определенным HTML.

Кроме того, window.load будет запущен только после загрузки DOM и загрузки всех внешних ресурсов, таких как изображения, видео. С его помощью можно дополнительно задерживать вложения событий.

Что делать, если я хочу добавить слушателя событий немедленно?

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

<p>whatever</p> 
<button id="mybutton">Click me</button> 
<script> 
    document.getElementById('mybutton').addEventListener(... 
</script> 
<p>rest of HTML</p> 

Это также открывает еще одну возможность, если вы поставите свои скрипты в конце HTML вместо головы, он убеждается, что все элементы добавляются в DOM и DOM практически готово для любых операций с использованием DOM API. Это широко использовалось при прослушивании события загрузки DOM не так просто. Хотя я не могу найти правильную ссылку, это была рекомендация Дуга Крокфорда.