Mouse events

mouseover, mouseout과 mouseenter,mouseleave의 차이를 확실히 알자

const clearBtn = document.querySelector(".clear-tasks");
const card = document.querySelector(".card");
const heading = document.querySelector("h5");

// Click
// clearBtn.addEventListener("click", runEvent);

// Double Click
// clearBtn.addEventListener("dblclick", runEvent);

// Mousedown => 마우스를 누른 순간(떼는 동작은 따로 있음)
// clearBtn.addEventListener("mousedown", runEvent);

// Mouseup => 누른 마우스를 뗄 때
// clearBtn.addEventListener("mouseup", runEvent);

// Mouseenter => 마우스가 해당 영역에 들어갈 때
// card.addEventListener("mouseenter", runEvent);

// Mouseleave => 마우스가 해당 영역을 들어갈 때
// card.addEventListener("mouseleave", runEvent);

// Mouseover => 마우스가 해당 요소의 영역 또는 포함된 다른 영역을 들어갈 때
// card.addEventListener("mouseover", runEvent);

// Mouseout => 마우스가 해당 영역 또는 포함된 다른 영역을 떠날 때
// card.addEventListener("mouseout", runEvent);

// Mousemove => 해당 요소 안에서 마우스를 움직일 때마다
card.addEventListener("mousemove", runEvent);

// Event Handler
function runEvent(e) {
  console.log(`EVENT TYPE: ${e.type}`);

  heading.textContent = `MouseX: ${e.offsetX}, MouseY: ${e.offsetY}`;

  document.body.style.backgroundColor = `rgb(${e.offsetX}, ${e.offsetY}, 40)`;
}