JavaScript

Об’єкти

// приклад створення об'єкту
const someObject = {
	name: "Жека",
	age: 39
};

console.log(someObject);
console.log(someObject.name);
// Зміна значення у name
someObject.name = "Іван"
console.log(someObject);

Події

Події — навантажують систему, тому використовувати обережно; знімати, коли більше не потрібно; вішаються тільки на один елемент:

• синтаксис події (спостерігача за подіями — addEventListener):

  const link = document.querySelector('.link');
  elem/document.addEventListener("ім'я події", func, options)
  elem/document.addEventListener("ім'я події", ()=>{ code }, options);
  

• події для багатьох елементів:

  // створюється колекція в якій будуть усі елементи з класом link
  const links = document.querySelectorAll('.link');
  // Для кожного посилання в масиві 'links' Додаємо обробник подій "click" для кожного посилання
  links.forEach(link => {
  	link.addEventListener("click", linkAction);
  	function linkAction(event) {
  		// Якщо атрибут 'data-google' посилання дорівнює 'false'
  		if (link.dataset.google === "false") {
  			// Виводимо в консоль '123'
  			console.log('123');
  			// Відключаємо стандартну дію при кліку на посилання Це зупиняє переход по посиланню
  			event.preventDefault();
  		}
  	}
  });
  

• відмінити подію — removeEventListener:

  // додавання події addEventListener
  link.addEventListener("click", (event) => {
  	console.log('123');
  });
  
  // відміна події removeEventListener
  link.removeEventListener("click", (event) => {
  	console.log('123');
  });
  

• делегування події:

  document.addEventListener("click", documentAction);
  
  function documentAction(e) {
    //Два кроки
    // Крок - 1 отримання об'єкту взаємодії
    const targetElement = e.target;
    console.log(targetElement);
    // Крок - 2 перевірка чи є об'єкт взаємодії
    if (targetElement.closest('.link')) {
      // Виводим повідомлення в консоль при кліку
      console.log('так, це те що нам потрібно!');
      e.preventDefault();
    }
  
  	// дія для кнопок
    if (targetElement.closest('.button')) {
      // Виводим повідомлення в консоль при кліку
      console.log('так, це одна з кнопок що нам потрібні!');
      e.preventDefault();
    }
  
  		// дія для закривання меню
    if (!targetElement.closest('.menu')) {
      // код для закриття меню при кліку за межами елементу
    }
  }
  

• опції для addEventListener:

  const options = {
  	"capture": false, // фаза, на якій повинен спрацювати обробник
  	"once": true, // якщо істина, тоді обробник буде автоматично видалено після виконання.
  	"passive": false // якщо true, то вказує, що обробник ніколи не викликає preventDefault()
  }
  

Можливості event:

• основні події миші — click, mouseenter, mouseleave:
  • mouseenter — наведення миші;
  • mouseleave — переведення миші;
  • mousemove — рух миші;
• тип події — console.log(event.type);
• о*б'єкт, на якому створив обробник —* console.log(event.target);;
• положення курсора по осі X відносно вікна — console.log(event.clientX);;