Событие JavaScript, виртуальный DOM и реальный DOM

JavaScript — это язык сценариев. Он в основном используется в веб-технологиях. Более 98% веб-сайтов используют JavaScript на своей стороне клиента для изменения поведения.

Исходный код JavaScript проходит через программу, называемую компилятором, которая переводит его в байт-код, который машина понимает и может выполнить. Как ни странно, в JavaScript нет шага сбора. В свете всего этого интерпретатор в программе тщательно изучает код JavaScript, расшифровывает каждую строку и запускает его.

Код JavaScript выполняется в браузере двумя способами:

  • Внутренний элемент скрипта в любом месте внутри HTML-документа.
  • внешний файл JavaScript (.js), а затем сослаться на этот файл js внутри HTML-документа, используя ссылку.

JavaScript События

Событие JavaScript — это самая важная часть веб-сайта, которая используется для изменения поведения клиентской части.

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

Есть много событий вJavaScript, например:

  • Щелчок: когда мы нажимаем кнопку мыши, мы можем изменить поведение элемента.
  • В контекстном меню: когда открыто контекстное меню («щелчок правой кнопкой мыши») (или когда пользователь пытается его открыть — это можно использовать для отключения контекстного меню).
  • Onmousedown: когда контекстное меню открывается правой кнопкой мыши.
  • Onmouseleave: когда мышь покидает элемент.
  • Onmouseover : когда мышь входит в элемент
  • При прокрутке: когда содержимое прокручивается.

Виртуальный дом и настоящий дом

DOM — это объектная модель документа, кроссплатформенный и независимый от языка интерфейс, который обрабатывает документ XML или HTML как древовидную структуру. Он определяет логическую структуру документов и способ доступа к документу и управления им. Это позволяет языку структурировать, манипулировать и стилизовать наш веб-сайт. Когда HTML-страница отображается в браузере, браузер загружает HTML-код в локальную память и автоматически анализирует его для отображения страниц на экране.

Если я рассмотрю таблицу, взятую из HTML-документа

‹СТРОКИ›

<TR>

‹TD›Shady Grove‹/TD›

‹TD›Эолийский‹/TD›

</TR>

<TR>

‹TD›За рекой, Чарли‹/TD›

‹TD›Дориан‹/TD›

</TR>

‹/СТРОКИ›

DOM представляет эту таблицу следующим образом:

Существует два типа ДОМ. Это настоящий Дом и Виртуальный Дом -

  • Настоящий Дом
  • Виртуальный дом.

Настоящий DOM: он представляет пользовательский интерфейс вашего приложения. скорость обновления низкая, он создает новый DOM, если элемент обновляется, он может создавать непосредственное обновление HTML.

Виртуальный дом: виртуальный DOM в виртуальном представлении реального DOM быстрее, чем реальный DOM, он обновляется при обновлении элемента JSX, он не может напрямую изменять HTML.