Как Javascript контролируют события

Question

Допустим, у меня есть простой код, использующий событие onmouseover

    <div onmousemove="myMoveFunction()">
      <p id="demo">I will demonstrate onmousemove!</p>
    </div>

(из w3school)

Я хочу спросить, откуда Javascript знает, что мышь находится на этом диве? Или когда мы используем onclick, как Js знает, что кнопка была нажата. Есть ли автоматические слушатели событий? или есть какой-нибудь цикл, управляющий изменениями событий в фоновом режиме? Пожалуйста, помогите мне, я в замешательстве.

Все ссылки для чтения тоже подойдут

Answer 1

Браузер отвечает за сбор событий по мере их появления на странице. Когда для данного действия добавлен прослушиватель событий, обратный вызов слушателя добавляется в цикл событий. Цикл обработки событий - это бесконечный цикл, который постоянно проверяет, нужно ли что-то делать (оптимизировано для процессора). В цикле обработки событий есть две основные задачи:

• рендеринг страницы, если есть изменения в DOM или CSSOM
• выполнение обратных вызовов, когда происходит какое-то конкретное действие

Важно знать, что javascript является однопоточным, то есть, если есть длительный обратный вызов, браузер не сможет перерисовать страницу, поэтому страница просто зависает.

Еще один способ понять, что происходит под капотом, - открыть инструменты Chrome Dev и перейти на панель производительности. Вы можете найти там, что именно происходит, когда вы взаимодействуете со страницей:

Есть несколько способов добавить прослушиватель событий:

• в html с использованием on[eventname]=action, т.е. <div onmousemove="myMoveFunction()">
• в javascript путем присвоения функции свойству [eventname], т.е. windows.onload = () => alert("hello");
• в javascript с использованием метода addEventListener(), т.е. element.addEventListener("click", () => alert("hello"));

Если вы хотите узнать больше о цикле событий, вот хорошие ресурсы:

• Филипп Робертс: Какого черта цикл событий в любом случае?
• Джейк Арчибальд в «Цикле событий» (более продвинутый)

Существует также довольно хороший и бесплатный курс, который многое объясняет о том, как работает браузер, и, что самое важное, показывает, как повысить производительность сайта: Оптимизация рендеринга в браузере

Answer 2

Когда вы используете, например, <div onmousemove="myMoveFunction()">, поскольку браузер читает DOM при загрузке страницы, за кулисами он генерирует код для прослушивателя событий, и больше ничего ему не нужно.