Event 종류

- Event 종류 

 

 

 

1. Mouse Event 

 

const submitBtn = document.querySelector(".submit-btn");
const form = document.querySelector("form");
const title = document.querySelector("h2");

// EVENT
submitBtn.addEventListener("click", handleEvent);
submitBtn.addEventListener("dblclick", handleEvent);
submitBtn.addEventListener("mousedown", handleEvent); // 요소를 클릭했을 때
submitBtn.addEventListener("mouseup", handleEvent); // 요소를 클릭했다가 마우스를 뗄 때
submitBtn.addEventListener("mouseenter", handleEvent); // 요소 위에 마우스가 올라갔을 때
submitBtn.addEventListener("mouseleave", handleEvent); // 요소 위에서 마우스가 벗어났을 때

function handleEvent(e) {
  // 원래 기본 동작을 방지
  e.preventDefault();

  console.log(`Event Type: ${e.type}`);
  // Event Type: click, dblclick, mousedown....
  title.textContent = `MouseX: ${e.offsetX} MouseY: ${e.offsetY}`;
  // MouseX: 34 MouseY: 15
}

 

- mousedown vs click

 

어떠한 요소를 클릭했을 때 먼저 mousedown 이벤트가 발생하고

마우스를 놓았을 때 click 이벤트가 발생한다.

mousedown => mouseup => click

 

 

2. Form Event

 

아래의 이벤트들이 발생했을 때 title 값이 input에 입력한 값으로 변경된다.

 

const form = document.querySelector("form");
const emailInput = document.getElementById("email");

// FORM EVENT
form.addEventListener("submit", handleEvent);
emailInput.addEventListener("keydown", handleEvent);
emailInput.addEventListener("keyup", handleEvent);
emailInput.addEventListener("keypress", handleEvent); // 사용자가 눌렀던 키의 문자가 입력되었을 때 발생
emailInput.addEventListener("focus", handleEvent); // input에 focus(마우스로 클릭했을 때)
emailInput.addEventListener("blur", handleEvent); // input에 focus를 풀었을 때(마우스로 클릭했다가 input 외를 클릭했을 때)
emailInput.addEventListener("cut", handleEvent); // input에 입력한 문자를 잘라냈을 때
emailInput.addEventListener("paste", handleEvent); // input에 문자를 붙여넣기 했을 때
emailInput.addEventListener("input", handleEvent); // input 요소 값이 달라질 때

function handleEvent(e) {
  // submit 이벤트가 발생했을 때만 원래 기본 동작을 방지
  if (e.type === "submit") {
    e.preventDefault();
  }

  console.log(`Event Type: ${e.type}`);
  // Event Type: click, dblclick, mousedown....

  //title.textContent = `MouseX: ${e.offsetX} MouseY: ${e.offsetY}`;
  // MouseX: 34 MouseY: 15

  title.textContent = e.target.value;
}