Добавление слушателей событий и понимание DOM


Что такое DOM?

MDN docs определяет DOM как представление данных объектов, составляющих структуру и содержимое документа в Интернете. По сути, это HTML, который активно отображается на веб-странице. Мы можем манипулировать тем, что отображается на веб-странице, используя различные элементы, доступные в JavaScript, обращаясь к различным узлам.

Что такое узел?

<body>
  <div>
    <p>First</p>
  </div>

  <div>
    <p>Second</p>
  </div>
</body>
Вход в полноэкранный режим Выход из полноэкранного режима

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

Поиск элемента на странице

JavaScript имеет несколько способов поиска узлов DOM. Некоторые из методов, которые пользуются наибольшей популярностью, это document.querySelector(), document.getElementById(), и document.getElementsByClassName(). Другие доступные методы включают document.getElementsByTagName() и document.querySelectorAll().

document.getElementById() в действии
Этот метод позволяет нам легко захватить узел, захватив его с присвоенным ему Id.

Представьте, что у нас есть следующий код:

<div>
  <h1 id="heading">This is the heading</h1>
</div>
Войти в полноэкранный режим Выйти из полноэкранного режима

В Javascript мы можем получить доступ к этому элементу с помощью кода document.getElementById('heading'). Часто бывает полезно присвоить этому элементу переменную, что я и продемонстрирую здесь:

const heading = document.getElementById('heading')
Вход в полноэкранный режим Выход из полноэкранного режима

другие методы в действии
Приведя следующий код, я продемонстрирую document.getElementsByClassName.

  <div class="article-title">
    <p>3 ways to spice up your dining room</p>
  </div>

  <div class="article-title">
    <p>What trends to expect this fall</p>
  </div>

  <div class="article-title">
    <p>You won't believe what this celebrity said...</p>
  </div>
Вход в полноэкранный режим Выход из полноэкранного режима

Допустим, вы хотите получить все элементы одновременно и даже присвоить им имя переменной, к которой будет легче получить доступ. Мы можем сделать это с помощью единственной строки кода:

let articleTitles = document.getElementsByClassName('article-title')
Войти в полноэкранный режим Выйти из полноэкранного режима

Совет по отладке!

Лучшая практика — всегда выводить console.log, когда вы захватываете элемент из DOM. Некоторые вещи могут быть сложными для захвата, поэтому всегда полезно дважды проверить, что код действует так, как вы хотите, прежде чем смотреть дальше. Давайте соберем весь наш предыдущий код вместе, чтобы увидеть это в действии.
На данный момент наш HTML выглядит следующим образом:

<div>
  <h1 id="heading">This is the heading</h1>
</div>

<div class="article-title">
    <p>3 ways to spice up your dining room</p>
</div>

<div class="article-title">
    <p>What trends to expect this fall</p>
</div>

<div class="article-title">
    <p>You won't believe what this celebrity said...</p>
</div>
Вход в полноэкранный режим Выход из полноэкранного режима

В то время как наш JavaScript с недавно добавленным console.logs выглядит следующим образом

const heading = document.getElementById('heading')
let articleTitles = document.getElementsByClassName('article-title')
console.log(heading)
console.log(articleTitles)!
Войти в полноэкранный режим Выход из полноэкранного режима

Это то, что ожидается в консоли, если все работает правильно:

Что такое слушатель событий?

Метод addEventListener() прикрепляет обработчик события к указанному элементу. addEventListener() принимает два аргумента: тип события, которое мы хотим прослушать, и функцию обратного вызова, которая будет вызываться каждый раз, когда наш обработчик событий «услышит» то, что мы скажем ему прослушать. Некоторые из наиболее часто используемых типов слушателей событий — это click, mouseover и keydown.

Итак, теперь, когда мы можем захватывать узлы, как добавить к ним слушателей событий?

Наиболее просто добавлять слушателей событий, когда мы присвоили имя переменной элементу, который мы захватили по его ID, поэтому в этой части статьи мы сосредоточимся на переменной, которую мы ранее назвали heading после получения элемента heading по его ID. Поскольку мы объявили постоянную переменную для heading, синтаксис будет следующим: heading.addEventListener(). Но, как уже говорилось ранее, мы должны добавить тип события, которое мы хотим прослушать, и нашу функцию обратного вызова. В данном демонстрационном примере мы добавим на нашу страницу слушатель события click, который просто выводит журнал в консоль при каждом нажатии.

heading.addEventListener('click', () => console.log('I was clicked!') )

Вход в полноэкранный режим Выход из полноэкранного режима

Наша функция обратного вызова находится внутри слушателя событий в виде стрелочной функции. Если бы мы просто написали heading.addEventListener('click', console.log('I was clicked!'), ‘I was clicked!’ было бы выведено в консоль при загрузке страницы, что уничтожило бы цель добавления нашего слушателя событий. Если слушатель событий добавлен правильно, то после щелчка на заголовке мы должны увидеть в консоли следующее:

Наш консольный журнал отображается, как и ожидалось! Изучая добавление слушателей событий в свой код, вы обнаружите, что в качестве слушателей событий можно добавлять гораздо более сложные функции, чтобы создать высокоинтерактивную веб-страницу.

Как насчет добавления функции в наш слушатель событий?

Если вы хотите поместить функцию, которую вы определили в другом месте вашего кода, в слушатель событий, вы просто опустите (), который вызывает функцию из слушателя событий.

function sayHello(){
    console.log('Hello!')
};
heading.addEventListener("click", sayHello)
Вход в полноэкранный режим Выход из полноэкранного режима

Совет по отладке

Я бы посоветовал вам всегда помещать console.log в слушатели событий, когда вы впервые применяете их, чтобы убедиться, что они реагируют так, как вы хотите.

Я надеюсь, что эта статья помогла понять, что такое DOM и как добавить слушателей событий в ваш код, чтобы активно манипулировать DOM. Счастливого кодинга!

Оцените статью
devanswers.ru
Добавить комментарий