처음 배우는 JavaScript 강의. 4주차: DOM 조작과 이벤트 (3) 이벤트 리스너 추가와 이벤트 핸들링

 

이벤트 리스너는 사용자의 행동(클릭, 스크롤, 키보드 입력 등)을 감지하고 이에 반응하여 특정 동작을 수행하도록 설정하는 JavaScript의 기능입니다. 이벤트 핸들링은 웹 페이지를 대화형으로 만드는 데 필수적입니다.

 

이벤트 리스너의 추가

이벤트 리스너를 추가하는 기본적인 방법은 addEventListener() 메소드를 사용하는 것입니다. 이 메소드는 두 가지 주요 매개변수를 받습니다: 이벤트의 종류와 이벤트가 발생했을 때 실행될 콜백 함수.

 

기본 구조

element.addEventListener(eventType, eventHandler);

 

• eventType: 감지하려는 이벤트의 유형 (예: "click", "mouseover", "keyup" 등)
• eventHandler: 이벤트 발생 시 실행될 함수

예제 1: 클릭 이벤트 리스너 추가

<button id="clickMeButton">Click Me!</button>

<script>
  const button = document.getElementById('clickMeButton');
  button.addEventListener('click', function() {
    alert('Button was clicked!');
  });
</script>

 

이 예제에서는 버튼을 클릭할 때마다 경고창이 나타나도록 설정하였습니다. addEventListener를 사용하여 click 이벤트에 대한 리스너를 버튼에 추가하고, 클릭 시 사용자에게 알림을 제공합니다.

 

예제 2: 마우스 오버 이벤트 리스너 추가

<div id="hoverDiv" style="width: 200px; height: 200px; background-color: #00D;">Hover over me!</div>

<script>
  const hoverDiv = document.getElementById('hoverDiv');
  hoverDiv.addEventListener('mouseover', function() {
    this.style.backgroundColor = '#D00';
  });
  hoverDiv.addEventListener('mouseout', function() {
    this.style.backgroundColor = '#00D';
  });
</script>

 

이 예제에서는 사용자가 div 요소 위로 마우스를 올리면 배경색이 변경됩니다. mouseover 이벤트가 div의 배경색을 빨간색으로 변경하고, mouseout 이벤트가 원래의 색으로 복원합니다.

 

이벤트 객체의 활용

이벤트 핸들러 함수에는 이벤트와 관련된 정보를 담고 있는 이벤트 객체가 자동으로 전달됩니다. 이 객체를 사용하여, 예를 들어 어느 키가 눌렸는지, 어느 요소가 클릭되었는지 등의 정보를 얻을 수 있습니다.

 

예제 3: 키보드 이벤트와 이벤트 객체

<input type="text" id="inputBox" placeholder="Type something...">

<script>
  const inputBox = document.getElementById('inputBox');
  inputBox.addEventListener('keyup', function(event) {
    console.log(`Key pressed: ${event.key}`);
  });
</script>

 

이 예제에서는 사용자가 입력 필드에 텍스트를 입력할 때마다 어떤 키가 눌렸는지 콘솔에 출력합니다. keyup 이벤트는 키보드의 키가 눌렸다가 떼어질 때 발생하며, 이벤트 객체의 key 속성을 통해 어떤 키가 눌렸는지 확인할 수 있습니다.

이벤트 리스너와 이벤트 핸들링을 통해 웹 페이지를 더욱 동적이고 상호작용적으로 만들 수 있습니다. 사용자 경험을 향상시키는 이 기능들을 활용해보세요.