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 є, мабуть, деякими з найбільш цікавих функцій, з якими ви стикалися на практиці. Не соромтеся повідомити в коментарях, чи використовували ви їх раніше, або напишіть деякі інші цікаві варіанти використання будь-якої з них.

Дякуємо, що читаєте нас!