JavaScript функции DOM, о которых вы не знали

Очень важно в процессе программирования использовать функции DOM и Web API, которые работают во всех современных браузерах и без каких-либо зависимостей.

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

Вы наверняка использовали addEventListener(), чтобы привязывать события к элементам в документе. Обычно вызов addEventListener() выглядит примерно так:

<script>
 element.addEventListener('click', doSomething, false);
</script>

Первый аргумент – это событие, которое вы слушаете. Второй аргумент – это функция обратного вызова, которая будет выполняться при возникновении события. Третий аргумент – это логическое значение useCapture, которое указывает, хотите ли вы использовать запуск или захват событий.

Эти аргументы довольно хорошо известны (особенно первые два). Но, возможно, вы не знали, что addEventListener() также принимает аргумент, который заменяет последний логический тип. Этот новый аргумент является объектом параметров (options), который выглядит следующим образом:

<script>
 element.addEventListener('click', doSomething, {
  capture: false,
  once: true,
  passive: false
 });
</script>

Обратите внимание, что синтаксис позволяет определять три различных свойства. Вот краткое описание того, что означает каждый из них:

• capture – логическое значение, аналогичное аргументу useCapture, упомянутому ранее.
• once – логическое значение, которое, если установлено в true, указывает, что событие должно выполняться только один раз для целевого элемента, а затем удаляется
• passive – последний логический тип, который, если он установлен в true, указывает, что функция никогда не будет вызывать preventDefault(), даже если она включена в тело функции

Самый интересный из этих трех вариантов – это опция once. Она определенно пригодится во многих обстоятельствах и избавит вас от необходимости использовать removeEventListener() или какой-либо другой сложный метод для принудительного запуска одного события.

 

Свойство event.detail

Как уже обсуждалось выше, события прикрепляются к элементам на веб-странице с помощью метода addEventListener(). Например, так:

<script>
 btn.addEventListener('click', function() {
  // какой-то код...
 }, false);
</script>

 

При использовании addEventListener() у вас может возникнуть необходимость предотвратить поведение браузера по умолчанию внутри вызова функции. Например, может быть, вы хотите перехватывать клики на элементах <a> и обрабатывать клики с помощью JavaScript. Вы бы сделали так:

<script>
 btn.addEventListener('click', function (e) {
  // какой-то код...
  e.preventDefault();
 }, false);
</script>

 

Здесь используется preventDefault(), что является современным эквивалентом выражения return false. Для этого необходимо передать объект события (event) в функцию, поскольку для этого объекта вызывается метод preventDefault().

Но есть еще кое-что, что вы можете сделать с этим объектом события. Фактически, когда используются определенные события (например, click, dbclick, mouseup, mousedown), они предоставляют нечто, что называется интерфейсом UIEvent (простые события пользовательского интерфейса). Многие функции этого интерфейса устарели или не стандартизированы. Но наиболее интересным и полезным является свойство detail, которое является частью официальной спецификации.

Вот как это выглядит в том же примере прослушивателя событий:

<script>
 btn.addEventListener('click', function (e) {
  // какой-то код...
  console.log(e.detail);
 }, false);
</script>

 

Метод scrollTo() для плавной прокрутки в окнах или элементах

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

Ранее этого можно было добиться с помощью jQuery плагинов, теперь же это возможно благодаря только одной строчке JavaScript, используя метод window.scrollTo().

Метод scrollTo() применяется к объекту window, чтобы дать указание браузеру прокрутить до нужного места на странице. Например, вот пример с простейшим синтаксисом:

<script>
 window.scrollTo(0, 1000);
</script>

 

Это позволит прокрутить окно на 0px вправо (что представляет координату x или горизонтальную прокрутку) и на 1000px вниз по странице (по вертикали). Но в этом случае прокрутка будет без гладкого анимированного эффекта, — страница будет прокручиваться очень быстро, так же, как если бы вы использовали локальную ссылку с указанным хешем в URL-адресе.

Иногда это именно то, что вы хотите. Но для того, чтобы получить плавную прокрутку, вам нужно включить менее известный объект ScrollToOptions, например так:

<script>
 window.scrollTo({
  top: 0,
  left: 1000,
  behavior: 'smooth'
 });
</script>

Этот код эквивалентен предыдущему примеру, но с добавлением гладкого (smooth) значения для свойства поведения (behavior) внутри объекта параметров (options).

 

Методы setTimeout() и setInterval() с необязательными аргументами

Во многих случаях выполнение анимаций на основе синхронизации с использованием window.setTimeout() и window.setInterval() теперь заменено на более удобное window.requestAnimationFrame(). Но бывают ситуации, когда эти методы являются более правильным выбором и важно знать об их возможностях.

Обычно эти методы используются с синтаксисом, подобным следующему:

<script>
 let timer = window.setInterval(doSomething, 3000);
 function doSomething() {
  // какой-то код...
 }
</script>

 

Здесь вызов setInterval() передается в двух аргументах: функция обратного вызова и интервал времени. С setTimeout() это будет выполняться один раз, тогда как в этом случае оно будет выполняться бесконечно, пока вы не вызовите window.clearTimeout() при передаче переменной timer.

Достаточно просто. Но что, если вам нужно, чтобы функция обратного вызова принимала аргументы? Что ж, более свежее дополнение к этим методам таймера позволяет следующее:

<script>
 let timer = window.setInterval(doSomething, 3000, 10, 20);
 function doSomething (a, b) {
  // какой-то код...
 }
</script>

Обратите внимание, что здесь мы добавили еще два аргумента в вызов setInterval(). Затем функция doSomething() будет принимать их в качестве параметров и может манипулировать ими по мере необходимости.

 

Свойство defaultChecked для радио и чекбоксов

Как вы, вероятно, знаете, для радио-переключателей и чекбоксов, если вы хотите получить или установить атрибут selected, вы можете использовать это свойство, например так (при условии, что radioButton является ссылкой на конкретный input формы):

<script>
 console.log(radioButton.checked); // true
 radioButton.checked = false;
 console.log(radioButton.checked); // false
</script>

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

Вот простой HTML пример:

<form id="form">
 <input type="radio" value="one" name="setOne"> Один
 <input type="radio" value="two" name="setOne" checked> Два<br />
 <input type="radio" value="three" name="setOne"> Три
</form>

 

При этом, даже после того, как радио-переключатель был изменен, вы можете просмотреть все input и выяснить, какой из них был отмечен изначально, например, так:

<script>
 let myForm = document.getElementById('form');
 for (i of myForm.setOne) {
  if (i.checked === true) {
   console.log(`Дефолтный выбор: ${i.value}`);
  }
 }
</script>

 

 

И в заключение…

Рассмотренные сегодня функции DOM являются, пожалуй, некоторыми из самых интересных функций, с которыми вы сталкивались на практике. Не стесняйтесь сообщить в комментариях, использовали ли вы их ранее, или напишите некоторые другие интересные варианты использования любой из них.

Спасибо, что читаете нас!