Кто слушает события DOM (например, onclick) по тегам HTML? - PullRequest
Новая
       8

Кто слушает события DOM (например, onclick) по тегам HTML?

0 голосов
/ 19 июня 2020

Я изучаю JavaScript на стороне клиента, и меня немного смущает то, как HTML элементы слушают события DOM и выполняют обратный вызов? 

<html>
  <head>
    <title>A page for you!</title>
  </head>
  <body>
    <input type="text" id="text-field" value="" />
    <button id="submit-button">Submit me!</button>
    <script type="application/javascript">
      const textField = document.getElementById("text-field");
      const button = document.getElementById("submit-button");
      const showValue = () => {
        let inputValue = textField.value;
        alert(inputValue);
      };
      button.onclick = showValue;
    </script>
  </body>
</html>

Например, я назначил showValue - свойство button.onclick. но кто настраивает слушателя и выполняет button.onclick?

Я полагаю, что где-то должен быть какой-то код JavaScript, и это будет похоже на 


const button.listenToOnclick = function() {
  // wait until user clicks
  if (clicked && button.onclick) {
    button.onclick();
  }
}
button.listenToOnClick(); // async and waits for the click to execute onclick

Этот код встроен в HTML тег кнопки?

Ответы [ 2 ]

1 голос
/ 19 июня 2020

Каждый элемент HTML изначально является объектом. Каждый из этих объектов, когда он создается, имеет набор свойств, которые по сути делают его объектом. Так же, как у вас есть .value в текстовом поле, присущем его созданию, у вас есть несколько других функций, которые вам доступны, например .onClick.

Когда вы прикрепляете функцию к событию, вы получаете доступ к этому предварительно запеченному в функциональности.

Чтобы ответить на ваш вопрос, сама кнопка ожидает срабатывания функции onClick. Но то, что отправляет эту информацию в Button или DOM, - это Window. Окно - это экземпляр ваших Javascript, HMTL и CSS, запущенных в вашем браузере.

Итак, что происходит, окно знает, что вы щелкнули и где вы щелкнули. Затем он отправляет эту информацию в дом и спрашивает: «Есть ли там что-нибудь?» если есть, то он говорит: «Было ли это прослушивание события щелчка?» если оба эти условия соблюдены, запускается событие onClick.

0 голосов
/ 19 июня 2020

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

Например, Firefox использует движок Gecko для рендеринга страниц и движок SpiderMonkey для работы с JavaScript. Chrome использует движок Blink для рендеринга и V8 для JavaScript (движок, из которого был создан Node.js).

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...