Що таке подія зберігання (storage event) та обробник подій (event handler) в javascript?

подія зберігання (storage event) та обробник подій (event handler) в JavaScript використовуються для відстеження змін у локальному сховищі (localStorage) та сховищі сесії (sessionStorage). Подія зберігання спрацьовує, коли дані в локальному сховищі або сховищі сесії змінюються, а обробник подій викликається для обробки цих змін. Ось приклад використання події зберігання та обробника подій в JavaScript:

// add storage event listener
window.addEventListener('storage', (event) => {
  console.log('Storage event:', event);
});

У цьому прикладі, ми використовуємо подію зберігання та обробник подій для відстеження змін у локальному сховищі або сховищі сесії в JavaScript.

Як зупинити дефолтну обробку події в JavaScript?

для зупинки дефолтної обробки події в JavaScript використовується метод preventDefault. Ось приклад зупинки дефолтної обробки події в JavaScript:

// prevent default event handling
event.preventDefault();

У цьому прикладі, ми використовуємо метод preventDefault для зупинки дефолтної обробки події в JavaScript.

Делегування подій JS

делегування подій в JavaScript - це підхід, коли обробник подій призначається батьківському елементу, а не дочірньому елементу. Це дозволяє використовувати один обробник подій для кількох дочірніх елементів, що спрощує код та покращує продуктивність. Ось приклад використання делегування подій в JavaScript:

// delegate event handling
document.addEventListener('click', (event) => {
  if (event.target.tagName === 'BUTTON') {
    console.log('Button clicked');
  }
});

У цьому прикладі, ми використовуємо делегування подій для обробки кліку на кнопці, яка є дочірнім елементом документа.

Події JS

події в JavaScript - це механізм, який дозволяє відстежувати та реагувати на дії користувача або браузера. Події можуть бути спрацьовані на різних елементах сторінки, таких як кнопки, поля вводу, посилання тощо. Ось приклад використання подій в JavaScript:

// add event listener
document.getElementById('button').addEventListener('click', () => {
  console.log('Button clicked');
});

У цьому прикладі, ми використовуємо подію click для кнопки з id 'button' та обробник подій для виведення повідомлення у консоль при кліку на кнопку.

що таке localstorage і sessionstorage? який максимальний розмір localstorage?

localStorage та sessionStorage - це механізми для зберігання даних на стороні клієнта в браузері. localStorage зберігає дані без терміну дії, тоді як sessionStorage зберігає дані тільки під час поточної сесії. Максимальний розмір localStorage в браузері зазвичай становить 5 МБ. Ось приклад використання localStorage та sessionStorage в JavaScript:

// set localStorage
localStorage.setItem('name', 'John Doe');

// set sessionStorage
sessionStorage.setItem('name', 'John Doe');

У цьому прикладі, ми використовуємо localStorage для зберігання даних без терміну дії та sessionStorage для зберігання даних тільки під час поточної сесії. localStorage та sessionStorage можуть бути використані для зберігання даних на стороні клієнта в браузері.

addEventListener в JS

addEventListener - це метод, який дозволяє додавати обробник подій до елемента в JavaScript. addEventListener приймає три аргументи: тип події, обробник подій та опції. Ось приклад використання addEventListener в JavaScript:

// add event listener
document.getElementById('button').addEventListener('click', () => {
  console.log('Button clicked');
});

У цьому прикладі, ми використовуємо addEventListener для додавання обробника подій click до кнопки з id 'button'. Коли користувач клікає на кнопку, виводиться повідомлення у консоль.

Обробник подій JS

обробник подій (event handler) в JavaScript - це функція, яка викликається при спрацюванні події. Обробник подій може бути призначений для різних типів подій, таких як click, change, keydown тощо. Ось приклад використання обробника подій в JavaScript:

// add event listener
document.getElementById('button').addEventListener('click', () => {
  console.log('Button clicked');
});

У цьому прикладі, ми використовуємо обробник подій для виведення повідомлення у консоль при кліку на кнопку з id 'button'.

Опишіть процес спливання bubbling подій у DOM

спливання подій (event bubbling) в DOM - це процес, коли подія спрацьовує на дочірньому елементі та спливає вгору до батьківського елемента. Це означає, що якщо користувач клікає на дочірньому елементі, подія спрацьовує спочатку на дочірньому елементі, а потім спливає вгору до батьківського елемента. Ось приклад спливання подій в DOM:

<div id='parent'>
  <button id='child'>Click me</button>
</div>

// add event listener to child element
document.getElementById('child').addEventListener('click', () => {
  console.log('Child clicked');
});

// add event listener to parent element
document.getElementById('parent').addEventListener('click', () => {
  console.log('Parent clicked');
});

У цьому прикладі, коли користувач клікає на кнопці з id 'child', спливає подія click від дочірнього елемента до батьківського елемента.

Form JS та submit

форма (form) в JavaScript - це елемент, який дозволяє користувачам вводити дані та надсилати їх на сервер. Подія submit спрацьовує, коли користувач натискає кнопку відправки форми. Ось приклад використання форми та події submit в JavaScript:

<form id='myForm'>
  <input type='text' name='name' placeholder='Enter your name'>
  <button type='submit'>Submit</button>
</form>

// add event listener to form element
document.getElementById('myForm').addEventListener('submit', (event) => {
  event.preventDefault();
  console.log('Form submitted');
});

У цьому прикладі, ми використовуємо форму з id 'myForm' та обробник подій submit для виведення повідомлення у консоль при натисканні кнопки відправки форми.