[JS] Event Listener & Event 객체

어떠한 버튼을 클릭했을 떄 어떤 액션이 일어나게 하려면 어떻게 해야할까❓

🖱 Event Listener

버튼 클릭하면 클릭 "이벤트" 발생
이벤트가 발생했을 때 어떠한 액션을 위한 함수를 호출하는데
👉 이 함수가 바로 '이벤트 리스너'

1️⃣ HTML 태그 속성으로 등록 ( 인라인 방식 )

<button onClick="sayHi()">
  Click me
</button>

<script>
  function sayHi() {
    alert("Hi from inline HTML!");
  }
</script>

2️⃣ 자바스크립트에서 프로퍼티 등록 ( 요소에 직접 )

ex 1 )

<button id="btn">
  Click me
</button>

<script>
  const btn = document.getElementById("btn")
  
  btn.onclick = function () {
  	alert("Hi from JS property!");
  };
</script>

ex 2 )

// 문서가 로드될 때 이 함수 실행
window.onload = function () {
  // id가 "text"인 요소를 리턴
  let text = document.getElementById("text");
  
  text.innerHTML = "HTML 문서 loaded";
}

3️⃣ addEventListener 메서드 사용 ( 표준적이고 추천! )

✅ element.addEventListener(이벤트명, 실행할 함수명(listener), 옵션);

<button id="btn">
  Click me
</button>

<script>
  const btn = document.getElementById("btn");
  
  btn.addEventListener("click", function () {
  	alert("Hi from addEventListener!");
  });
</script>

방법	설명	장점	단점
① HTML 속성( )	태그 안에 직접 작성	간단하고 빠르게 테스트 할 때 좋음	JS와 HTML이 섞여서 유지보수 불편
② JS 프로퍼티( element.onclick = )	JS 코드에서 함수 할당	구조 분리, 기본적 사용 OK	한 개만 등록 가능( 이전 핸들러 덮어씀 )
③ addEventListener	JS 코드에서 표준 방식	여러 개 이벤트 등록 가능, 제거도 가능	문법이 조금 더 길어짐

📝 추천은? 👉 실무에선 ③ addEventListener 방식 가장 많이 씀!

유지보수, 코드 분리, 복잡한 이벤트 관리에 좋아서 추천

---

👏이벤트 객체

🧐어떤 이벤트 객체들이 내장되어있는지 확인해보자❗

const buttonElement = document.querySelector('.btn');
buttonElement.addEventListener('click', handleClick)

function handleClick(event) {
  let val = event;
  console.log(val);
}

🎯속성 - target

val = event.target;

이벤트가 발생한 실제 DOM 요소 (event.target)

버튼 클릭하면 해당 요소가 리턴됨

val = event.target.id;
// 아무것도 출력 안 됨 ( 해당 요소에 id가 없기 때문 )

val = event.target.className;
// 출력 : btn( 요소의 클래스 이름이 출력 )

...

<button class="btn a">
  버튼
</button>

val = event.target.classList;

classList로 하면 리스트 형태로 나옴

🕶속성 - type

val = event.type;  
// 출력 : click( 이벤트가 어떤 타입인지 )

🔹속성 - clientY & clientX

윈도우로부터의 거리 좌표

val = event.clientY;

버튼 클릭할 때마다 숫자가 변경됨

val = event.clientX;

🔸속성 - offsetY & offsetX

요소로부터의 거리 좌표

val = event.offsetY;

val = event.offsetX;

---

🪁이벤트 종류

🔻click - 눌렀다가 뗐을 때 한 세트로 인식되어 발생

const submitBtn = document.querySelector('.submit-btn');  // submit 버튼
const container = document.querySelector('form');  // form 태그
const title = document.querySelector('h2'); // Title

// click
submitBtn.addEventListener('click', handleEvent)

// e => event 객체
function handleEvent(e) {
  // form 제출 시 페이지 새로고침(리프레시) 방지하기 위한 것
  e.preventDefault();
  console.log(`Event Type: ${e.type}`);
}

preventDefault 해주니까 이젠 새로고침 해도 되는걸 볼 수 있음

🔻dblclick

submitBtn.addEventListener('dblclick', handleEvent)

function handleEvent(e) {
  e.preventDefault();
  console.log(`Event Type: ${e.type}`);
}

더블클릭 따닥 누르면 type이 dblclick 나오는 걸 볼 수 있음

🔻mousedown - 마우스 버튼 눌렀을 때

submitBtn.addEventListener('click', handleEvent)
submitBtn.addEventListener('mousedown', handleEvent)

function handleEvent(e) {
  e.preventDefault();
  console.log(`Event Type: ${e.type}`);
}

🤔왜 mousedown이 먼저 출력될까❓
👉 mousedown이 마우스 클릭이고, click은 객체 클릭이기 때문❗

당연 마우스가 먼저 클릭되고 객체가 클릭되는것

🔻mouseup - 마우스 버튼 뗐을 때

submitBtn.addEventListener('click', handleEvent)
submitBtn.addEventListener('mousedown', handleEvent)
submitBtn.addEventListener('mouseup', handleEvent)

function handleEvent(e) {
  e.preventDefault();
  console.log(`Event Type: ${e.type}`);
}

mousedown → mouseup → click 순서인 이유
💡누르고(mousedown), 떼야(mouseup) 진짜 클릭(click)으로 인정되기 때문🤓

🔻mouseenter
마우스가 요소에 처음 들어왔을 때 한 번만 발생하는 이벤트

submitBtn.addEventListener('mouseenter', handleEvent)

function handleEvent(e) {
  e.preventDefault();
  console.log(`Event Type: ${e.type}`);
}

🔻mouseleave
요소 바깥으로 완전히 나갔을 때 한 번만 발생하는 이벤트

submitBtn.addEventListener('mouseleave', handleEvent)

function handleEvent(e) {
  e.preventDefault();
  console.log(`Event Type: ${e.type}`);
}

🔻mousemove
마우스가 "요소 안에서" 움직일 때마다 계속 발생

submitBtn.addEventListener('mousemove', handleEvent)

function handleEvent(e) {
  e.preventDefault();
  console.log(`Event Type: ${e.type}`);
}

폼 이벤트

🎈submit

👉 사용자가 버튼키 등을 활용하여 폼을 전송할 때 발생

🔻keydown(키보드 눌렀을 때) & keyup(눌렀다가 뗐을 때)

const form = document.querySelector('form');
const emailInput = document.getElementById('email');
const title = document.querySelector('h2');

form.addEventListener('submit', handleEvent)

function handleEvent(e) {
  e.preventDefault();
  console.log(`Event Type: ${e.type}`);
}

이렇게 하면 submit 이벤트가 발생한 걸 알 수 있음

submit 이벤트가 발생하려면
button에 type을 submit 이라고 지정해줘야하고 폼으로 감싸야함🐍

// form 태그 요소를 선택 (submit 이벤트 감지용)
const form = document.querySelector('form');

// id가 "email"인 input 요소 선택 (이메일 입력창)
const emailInput = document.getElementById('email');

// h2 요소 선택 (입력값을 여기에 표시하려고 함)
const title = document.querySelector('h2');

// form이 제출되면 handleEvent 함수 실행
form.addEventListener('submit', handleEvent);

// 이메일 입력창에서 키를 누를 때 handleEvent 함수 실행
emailInput.addEventListener('keydown', handleEvent);

// 이벤트가 발생했을 때 실행되는 함수
function handleEvent(e) {
  // 기본 동작(예: 폼 제출 시 새로고침)을 막음
  e.preventDefault();

  // 이벤트 종류 출력 (예: 'submit' 또는 'keydown')
  console.log(`Event Type: ${e.type}`);

  // 입력된 값을 h2 텍스트로 설정하려고 함
  title.innerText = e.target.value;
}

이메일 인풋에 타이핑을 쳐도 안됨

if (e.type === 'submit') {
  e.preventDefault();  
}

🔻keypress - 키보드 문자가 입력되었을 때

const form = document.querySelector('form');
const emailInput = document.getElementById('email');
const title = document.querySelector('h2');

// keydown -> 키를 눌렀을 때
emailInput.addEventListener('keydown', handleEvent);
// keyup -> 키를 눌렀다가 뗐을 때
emailInput.addEventListener('keyup', handleEvent);
// keypress -> 키의 문자가 입력되었을 때
emailInput.addEventListener('keypress', handleEvent);

function handleEvent(e) {
  console.log(`Event Type: ${e.type}`);
  
  if (e.type === 'submit') {
    e.preventDefault();
  }
  
  title.innerText = e.target.value;
}

키를 누르면( keydown ) 반응 시작 →
글자가 입력됨( keypress ) → 손을 떼야 끝남( keyup ) 이 순서임

🎈focus - 폼 요소를 눌렀을 때

emailInput.addEventListener('focus', handleEvent);

function handleEvent(e) {
  console.log(`Event Type: ${e.type}`);
  
  if (e.type === 'submit') {
    e.preventDefault();
  }
  
  title.innerText = e.target.value;
}

🎈blur

👉 입력칸에서 포커스가 빠질 때 (다른 데 클릭하거나 탭해서 나갈 때) 발생

emailInput.addEventListener('focus', handleEvent);
emailInput.addEventListener('blur', handleEvent);

function handleEvent(e) {
  console.log(`Event Type: ${e.type}`);
  
  if (e.type === 'submit') {
    e.preventDefault();
  }
  
  title.innerText = e.target.value;
}

🎈cut

👉 입력된 내용을 잘라낼 때 (Ctrl+X나 마우스로 잘라낼 때) 발생

emailInput.addEventListener('cut', handleEvent);

function handleEvent(e) {
  console.log(`Event Type: ${e.type}`);
  
  if (e.type === 'submit') {
    e.preventDefault();
  }
  
  title.innerText = e.target.value;
}

🎈paste

👉 클립보드에서 내용을 붙여넣을 때 (Ctrl+V 등) 발생

emailInput.addEventListener('paste', handleEvent);

function handleEvent(e) {
  console.log(`Event Type: ${e.type}`);
  
  if (e.type === 'submit') {
    e.preventDefault();
  }
  
  title.innerText = e.target.value;
}

🎈input

👉 입력창에 글자가 바뀔 때마다 발생( 타이핑, 붙여넣기, 잘라내기 전부 포함 )

emailInput.addEventListener('input', handleEvent);

function handleEvent(e) {
  console.log(`Event Type: ${e.type}`);
  
  if (e.type === 'submit') {
    e.preventDefault();
  }
  
  title.innerText = e.target.value;
}