41. Події `миші`

onclick - клік лівою кнопкою `миші` по елементу
onmouseover - подія відбувається при потраплянні вказівника `миші` в межі елементу
onmouseout - подія відбувається при покиданні вказівника `миші` меж елементу
mousedown / mouseup – коли натиснули / відтиснули кнопку `миші` на елементі
event.addEventListener(подія, function, useCapture) - реєструє обробник події ('click', 'input', 'change' 'mouseover', 'mouseout' - без on), function - функція, яка при цьому виконується, useCapture - true або false ( true - реєструє обробник події для фази перехоплення, false - реєструє обробник події для фази всплиття)
event.removeEventListener(подія, nameFunction, useCapture ) - скасовує подію зареєстровану за допомогою event.addEventListene , nameFunction - ім'я функції, яка скасовується ( функція, яка записана виразом - не скасовується), useCapture - true або false ( true - реєструє обробник події для фази перехоплення, false - реєструє обробник події для фази всплиття)

Приклади

onclick - клік лівою кнопкою `миші` по елементу

<button onclick="alert('Спрацювало!')">Подія onclick</button>

Коли об'єм коду великий його записують в середину функції

.asc

<button onclick="click1()">Жовтий background</button>

function click1(){
	let elem1 = document.querySelector('.asc'); 
	elem1.style.background="yellow";
}

Події при виборі по id

.df

<input id="elem2" type="button" value="Синій background"/>

elem2.onclick = function() {
    let elem2 = document.querySelector('.df'); 
	elem2.style.background="blue";

Функція записана окремо

.dg

<input id="elem3" type="button" value="Зелений background"/>

elem3.onclick = myf;
 
 function myf() {
    let elem3 = document.querySelector('.dg'); 
	elem3.style.background="green";
  };

onmouseover - подія відбувається при потраплянні вказівника `миші` в межі елементу

#elem4 -> Наведи курсор

 elem4.onmouseover = ff1;
 
 function ff1() {
    let elem4 = document.querySelector('#elem4'); 
	elem4.style.background="grey";
  };

onmouseout - подія відбувається при покиданні вказівника `миші` меж елементу

#elem5 -> Наведи курсор і виведи

  elem5.onmouseout = ff2;
 
 function ff2() {
    let elem5 = document.querySelector('#elem5'); 
	elem5.style.background="yellow";
  };

mousedown / mouseup – коли натиснули / відтиснули кнопку `миші` на елементі

#elem6 -> Натисни і (пауза) відтисни

 // onmousedown
 elem6.onmousedown = ff3;
 
 function ff3() {
    let elem6 = document.querySelector('#elem6'); 
	elem6.style.background="yellow";
  };
  
 // onmouseup 
  elem6.onmouseup = ff4;
 
 function ff4() {
    let elem6 = document.querySelector('#elem6'); 
	elem6.style.background="blue";
  };

event.addEventListener(подія, function, useCapture) - реєструє обробник події ('click', 'input', 'change' 'mouseover', 'mouseout' - без on), function - функція, яка при цьому виконується, useCapture - true або false ( true - реєструє обробник події для фази перехоплення, false - реєструє обробник події для фази всплиття)

#elem7 -> Натисни

 elem7.addEventListener('click', function() {
         this.style.background="orange";
  };

event.removeEventListener(подія, nameFunction, useCapture ) - скасовує подію зареєстровану за допомогою event.addEventListene , nameFunction - ім'я функції, яка скасовується ( функція, яка записана виразом - не скасовується), useCapture - true або false ( true - реєструє обробник події для фази перехоплення, false - реєструє обробник події для фази всплиття)

#elem8 -> Натисни

 elem8.addEventListener('click', pusk, false);
   
 function pusk() {
        alert('Запуститься тільки один раз');
        elem8.removeEventListener('click', pusk, false);
  };

далі ✏