자바스크립트 이벤트 모르면 나가라.

오늘은 웹 페이지에서 일어나는 여러 가지 이벤트에 대해 얘기해볼게.
자바스크립트로 페이지를 더 인터랙티브(interactive)하게 만들려면 이벤트를 잘 이해하고 활용하는 게 중요해.

---

이벤트란?

**이벤트(event)**란 브라우저에서 발생하는 상호작용을 말해. 예를 들어 사용자가 마우스를 클릭했을 때, 더블 클릭했을 때, 키보드 버튼을 눌렀을 때, 스크롤을 했을 때 등등이 있어. 이런 상호작용이 발생하면 자바스크립트에서는 이벤트가 발생했다고 표현해.

 

이벤트는 크게 세 가지로 구분할 수 있어:

이벤트 타겟(event target),

이벤트 타입(event type),

이벤트 핸들러(event handler).

---

이벤트 타겟

이벤트 타겟은 이벤트가 일어난 문서 객체를 의미해.
예를 들어, 버튼을 클릭했다면 그 버튼이 이벤트 타겟이 되는 거지. 모든 이벤트는 이벤트 타겟에서 시작해.

 

이벤트 타입

이벤트 타입은 이벤트의 종류를 의미해. 몇 가지 예를 들어볼게:

• click: 클릭할 때 발생
• dblclick: 더블 클릭할 때 발생
• scroll: 스크롤할 때 발생

이 외에도 다양한 이벤트 타입이 있어. 자세한 건 아래 레퍼런스를 참고해보자.

Element: click 이벤트 - Web API | MDN (mozilla.org)

Element: click 이벤트 - Web API | MDN

 

이벤트 핸들러

이벤트 핸들러는 이벤트가 발생했을 때 동작하는 코드를 의미해. 보통 함수 형태로 작성돼. 이벤트가 발생하면 이 함수가 실행되는 거지.

이벤트 등록

자바스크립트에서 이벤트를 등록하는 방법은 **addEventListener()**를 사용하는 거야. 문법은 다음과 같아:

[문서객체].addEventListener("이벤트명", 콜백함수);

예를 들어, 아래 코드는 <p> 태그를 클릭했을 때 알림 창이 뜨도록 하는 거야

document.querySelector("p").addEventListener("click", function() {
   alert("클릭하셨습니다.");
});

---

예시 코드

이제 실제로 이벤트를 등록하고 사용하는 예시를 볼까?

// 1. 문서 객체 찾을 때
const h1El = document.querySelector("h1");

// 2. 문서 객체 콘텐츠 바꾸는 법
h1El.innerHTML = "<i>kimjunsu</i>";
h1El.innerText = "<i>kimjunsu</i>";
h1El.textcontent = "<i>kimjunsu</i>";

// 3. 스타일 주는 법
h1El.style.color = "red";
h1El.style.fontSize = "90px";

// 4. 클래스 추가하는 법
h1El.classList.add("active");

// 5. 클래스 제거하는 법
h1El.classList.remove("bye");

// 6. 클래스 토글하는 법
h1El.classList.toggle("done");
h1El.classList.toggle("done");

// 7. input value 가져오는 법
setTimeout(() => {
  const inputEl = document.querySelector("input");
  console.log(inputEl.value);
}, 3000);

// 이벤트 예제

const inputEl = document.querySelector("input");
inputEl.addEventListener("keydown", function (ev) {
  console.log(this);
  console.log(ev);
  console.log("keydown");
  if (ev.key === "Enter") {
    alert("검색!");
    // 검색 로직 구현 가능
  }
});

const buttonEl = document.querySelector("button");
buttonEl.addEventListener("click", function (ev) {
  console.log(this);
  console.log(ev);
  console.log("click");
});

---

이제 이벤트에 대해 조금 더 이해가 됐지? 이렇게 자바스크립트를 활용하면 사용자와 더 상호작용할 수 있는 재미있는 웹 페이지를 만들 수 있어. 다양한 이벤트를 사용해보면서 실습해보자! 😊