JavaScript이벤트

📌 1. 이벤트(Event)란?

이벤트란 웹 페이지에서 발생하는 다양한 상황들을 의미합니다. 예를 들어 버튼 클릭, 마우스를 올리기, 키보드 입력, 스크롤, 페이지 로딩 등 모든 사용자 행동이 이벤트입니다.

📌 2. 이벤트 핸들링(Handling)이란?

이벤트 핸들링이란 특정 이벤트가 발생했을 때 실행할 동작을 지정하는 것, 즉 이벤트에 "반응"하는 코드를 작성하는 것을 말합니다.

이벤트가 발생했을 때 호출되는 함수를 이벤트 핸들러(Event Handler) 혹은 이벤트 리스너(Event Listener) 라고 부릅니다.

📌 3. 주요 이벤트 종류

자바스크립트에는 매우 다양한 이벤트 종류가 있으며, 대표적으로 아래와 같은 카테고리로 나뉩니다.

🖱️ 마우스 이벤트

• click: 요소 클릭
• dblclick: 더블 클릭
• mousedown: 마우스 버튼 누름
• mouseup: 마우스 버튼 뗌
• mouseover: 요소 위에 마우스 올림
• mouseout: 요소에서 마우스 나감
• mousemove: 마우스 이동

⌨️ 키보드 이벤트

• keydown: 키 누름
• keyup: 키 뗌
• keypress: 키 누르고 있음

📝 폼 이벤트

• submit: 폼 제출
• change: 값 변경
• focus: 포커스 얻음
• blur: 포커스 잃음

🌐 문서/윈도우 이벤트

• load: 페이지 로드 완료
• resize: 창 크기 변경
• scroll: 스크롤 발생

📌 4. DOM요소 선택 방법

이벤트를 등록하기 전에 가장 먼저 해야할 일은 HTML 요소를 선택하는 것입니다. 이때 사용하는 것이 바로 querySelector()과 querySelectorAll()입니다.

>document.querySelector('선택자')

 

• CSS 선택자와 일치하는 첫 번째 요소를 반환합니다.
• 가장 많이 쓰이며 단일 요소를 다룰 때 사용합니다

const bgButton = document.querySelector('#bgChange');

 

>document.querySelectorAll('선택자')

• 선택자와 일치하는 모든 요소를 NodeList로 반환합니다.
• 여러 요소를 반복 처리할 때 사용합니다.

const divs = document.querySelectorAll('div');
divs.forEach(div => {
  div.onclick = function() {
    this.style.backgroundColor = randomColorFunc();
  };
});

📌 5. 이벤트 핸들러 등록 방법

1) HTML 요소의 이벤트 핸들러 속성

자바스크립트에서 요소를 가져와 직접 이벤트 속성을 지정가능

const bgButton = document.querySelector('#bgChange');
bgButton.onclick = function() {
  const randomColor = randomColorFunc();
  bgButton.style.backgroundColor = randomColor;
};

이 예제에서는 버튼을 클릭하면 배경색이 무작위로 바뀝니다.

같은 방식으로 window.onkeydown을 사용하면 키 입력에도 반응할 수 있습니다.

const keydownSpan = document.querySelector('#keydown');
window.onkeydown = function() {
  keydownSpan.textContent = '안녕하세요 반갑습니다 :)';
};

---

2) 인라인 이벤트 핸들러

HTML태그에 직접 onclick, onkeydown등의 이벤트 속성을 사용하여 함수를 지정하는 방식이다

그러나 유지보수와 코드 파싱에 어려움이 있을 수 있기에 사용하지 않는 것을 권장한다.

//HTML
<button onclick="textChangeFunc()">색상 변경</button>

//JavaScript
function textChangeFunc() {
  const randomColor = randomColorFunc();
  document.querySelector('#textChange').style.color = randomColor;
}

 

3)addEventListener() 메서드

표준 이벤트 모델로서 HTML요소에 addEventListener메서드를 사용하여 이벤트를 등록하여 한 요소에 여러개의 이벤트 핸들러를 등록가능하다. 한 요소에 여러 이벤트를 동시에 등록할 수 있는 유연한 방식이다.

 

📌 6. 여러 요소에 이벤트 등록하기

querySelectorAll()과 forEach()를 함께 사용하면 동일한 클래스를 가진 여러 요소에 한 번에 이벤트를 등록할 수 있습니다.

const divs = document.querySelectorAll('div');

divs.forEach(div => div.onclick = function() {
  this.style.backgroundColor = randomColorFunc();
});

 

📌 7. 이벤트 제거하는 방법

이벤트를 제거할 때에는 removeEventListener()를 사용합니다.

이때는 등로한 함수와 같은 참조값을 사용해야한다.

const removeButton = document.querySelector('#remove');

let removeChange = () => {
  const randomColor = randomColorFunc();
  removeButton.style.color = randomColor;
};

removeButton.addEventListener('click', removeChange);

// 이벤트 제거
removeButton.removeEventListener('click', removeChange);

 

📌 8. 이번 예제에서 주로 사용된 랜덤색상 생성 함수입니다.

function random(number) {
  return Math.floor(Math.random() * (number + 1));
}

function randomColorFunc() {
  return `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
}

RGB포맷을 기반으로 랜덤한 색상을 생성해줍니다.