metodi_js_dlja_roboti_z_dom

Различия

Показаны различия между двумя версиями страницы.

Ссылка на это сравнение

Предыдущая версия справа и слева Предыдущая версия
Следующая версия 		Предыдущая версия
metodi_js_dlja_roboti_z_dom [2023/12/16 18:49]
tro [stopPropagation] 		metodi_js_dlja_roboti_z_dom [2023/12/28 19:32] (текущий)
tro [removeEventListener]
Строка 93: Строка 93:
 містить псевдомасив, у якому зібрані всі дочірні вузли-елементи вузла elem, тобто ті, що відповідають тегам містить псевдомасив, у якому зібрані всі дочірні вузли-елементи вузла elem, тобто ті, що відповідають тегам
 ===== elem.firstChild ===== ===== elem.firstChild =====
-містить посилання на перший дочірній вузол (вузол-елемент або текстовий вузол) вузла elem+містить посилання на перший дочірній вузол (вузол-елемент або текстовий вузол) вузла elem. 
 +УВАГА - першим майже завжди буде текстовим вузлом бо між тегами є пробіл та перенос строки.
 ===== elem.firstElementChild ===== ===== elem.firstElementChild =====
 містить посилання на перший дочірній вузол-елемент усередині elem, тобто той, що відповідає тегу містить посилання на перший дочірній вузол-елемент усередині elem, тобто той, що відповідає тегу
Строка 116: Строка 117:
 </code> </code>
 ==== dataset ==== ==== dataset ====
-Для отримання значення data-атрибута використовується властивість dataset, після якої через крапку пишеться ім'я атрибута без data-. Тобто data- відкидається, а інша частина імені записується як ім'я властивості об'єкта.+**Зберігає користувацькі дата-атрибути**. Зручніше працювати через **dataset**. Для отримання значення data-атрибута використовується властивість dataset, після якої через крапку пишеться ім'я атрибута без data-. Тобто data- відкидається, а інша частина імені записується як ім'я властивості об'єкта.
 <code> <code>
 const saveBtn = document.querySelector('button[data-action="save"]'); const saveBtn = document.querySelector('button[data-action="save"]');
Строка 160: Строка 161:
 ==== Читання innerHTML ==== ==== Читання innerHTML ====
 Властивість innerHTML зберігає вміст елемента, включно з тегами, у вигляді рядка. Значення, що повертається, — це **завжди валідний HTML-код**. Властивість innerHTML зберігає вміст елемента, включно з тегами, у вигляді рядка. Значення, що повертається, — це **завжди валідний HTML-код**.
 +Він затира структуру що була і заміняє собою нову  HTML-розмітку
 <code> <code>
-const link = document.querySelector(".one"); +const = '<div class="myClass"></div>' 
-console.log(link.innerHTML);+const myNewHtml = document.querySelector(".one"); 
 +link.innerHTML(myNewHtml);
 </code> </code>
 ==== Зміна innerHTML ==== ==== Зміна innerHTML ====
Строка 187: Строка 190:
   * **handler** — колбек-функція, яка буде викликана під час настання події   * **handler** — колбек-функція, яка буде викликана під час настання події
   * **options** — необов'язковий об'єкт параметрів із розширеними налаштуваннями   * **options** — необов'язковий об'єкт параметрів із розширеними налаштуваннями
 +<code>
 +const myBtn = doucument.querySelector('.js-button-click');
  
 +myBtn.addEventListener('click',onButtonClick);
 +
 +function onButtonClick (){
 +console.log('Hello');
 +}
 +</code>
 +або
 <code> <code>
 const button = document.querySelector(".my-button"); const button = document.querySelector(".my-button");
Строка 208: Строка 220:
 видаляє слухача події з елемента. видаляє слухача події з елемента.
 <code> <code>
-element.removeEventListener(event, handler, options)+element.removeEventListener(event, handler, options); 
 +</code> 
 + 
 +<code> 
 +element.removeEventListener('onclick', myfunction);
 </code> </code>
 ====== Об'єкт події ====== ====== Об'єкт події ======
Строка 259: Строка 275:
   * при кліку на кнопку з атрибутом type="submit"   * при кліку на кнопку з атрибутом type="submit"
   * Або при натисканні клавіші Enter під час перебування в будь-якому її текстовому полі форми   * Або при натисканні клавіші Enter під час перебування в будь-якому її текстовому полі форми
 +
 +<code>
 +const form = document.querySelector("form");
 +
 +form.addEventListener("submit", handleSubmit);
 +
 +function handleSubmit(event) {
 +  event.preventDefault();
 +  console.log(event.elements.email.value);
 +.
 +.
 +.
 +  }
 +  
 +  
 +
 +</code>
 +або
 <code> <code>
 const form = document.querySelector("form"); const form = document.querySelector("form");
Строка 266: Строка 300:
 }); });
 </code> </code>
 +або
 <code> <code>
 const registerForm = document.querySelector(".form"); const registerForm = document.querySelector(".form");
Строка 292: Строка 327:
 </code> </code>
 ===== change ===== ===== change =====
-Подія відбувається після зміни значення елемента форми +Подія відбувається після зміни значення елемента форми і одночасної втрати фокусу
 ===== input ===== ===== input =====
 Подія input відбувається тільки на текстових полях і textarea. Подія input відбувається тільки на текстових полях і textarea.
Строка 340: Строка 375:
   alert("Descendant click handler");   alert("Descendant click handler");
 }); });
 +</code>
 +===== stopImmediatePropagation() =====
 +  * Зупиняє "спливання" події так само, як event.stopPropagation().
 +  * Також зупиняє виконання всіх інших обробників подій, які слухають цю ж подію на даному елементі, навіть якщо вони були зареєстровані перед цим.
 +
 +===== nodeName (перевірка відповідности типу єлементу) =====
 +<code>
 +function selectColor(event) {
 +  if (event.target.nodeName !== "BUTTON") {
 +    return; // користувач клікнув між кнопками
 +  }
 +
 +  const selectedColor = event.target.dataset.color; // користувач клікнув на кнопку і ми маємо доступ до її атрибутів
 +}
 </code> </code>
  
  • /sites/data/attic/metodi_js_dlja_roboti_z_dom.1702752577.txt.gz
  • Последнее изменение: 2023/12/16 18:49
  • — tro