JavaScript 이벤트 처리: 클릭 및 사용자 상호 작용 마스터하기

소개

JavaScript 이벤트 핸들링 실습에 오신 것을 환영합니다! 이벤트는 사용자가 버튼을 클릭하거나, 마우스를 움직이거나, 키를 누르는 등 브라우저에서 발생하는 동작입니다. 이벤트 핸들링은 이러한 이벤트에 응답하는 코드를 작성하여 웹 페이지를 상호작용적이고 동적으로 만드는 과정입니다.

이 실습에서는 JavaScript 에서 이벤트를 처리하는 기본적인 방법들을 배우게 됩니다. HTML 의 기본적인 onclick 속성부터 시작하여 더 강력하고 유연한 addEventListener 메서드까지 진행할 것입니다. 또한 event 객체를 사용하여 이벤트 동작을 제어하고 이벤트에 대한 정보를 얻는 방법을 배우게 됩니다.

이 실습이 끝나면 다음을 할 수 있게 됩니다:

HTML 요소에 이벤트 핸들러를 연결합니다.
JavaScript 로직을 HTML 구조와 분리합니다.
이벤트에 대한 브라우저의 기본 동작을 방지합니다.
어떤 요소가 이벤트를 발생시켰는지 식별합니다.

시작해 봅시다!

이것은 가이드 실험입니다. 학습과 실습을 돕기 위한 단계별 지침을 제공합니다.각 단계를 완료하고 실무 경험을 쌓기 위해 지침을 주의 깊게 따르세요. 과거 데이터에 따르면, 이것은 초급 레벨의 실험이며 완료율은 98%입니다.학습자들로부터 100%의 긍정적인 리뷰율을 받았습니다.

HTML 요소에 onclick 속성 추가

이 단계에서는 가장 직접적인 이벤트 처리 방법인 HTML 이벤트 핸들러 속성을 사용하는 방법을 배우게 됩니다. onclick 속성을 사용하면 요소가 클릭될 때 JavaScript 코드 조각을 실행할 수 있습니다. 이 방법은 간단하지만, 일반적으로 HTML 과 JavaScript 를 분리하는 것이 더 좋으며, 이는 다음 단계에서 다룰 것입니다.

먼저, 버튼에 onclick 속성을 추가해 보겠습니다.

WebIDE 왼쪽의 파일 탐색기에서 index.html 파일을 찾아 엽니다.
<button> 요소를 찾습니다.
onclick 속성을 포함하도록 버튼 태그를 수정하여 알림 (alert) 을 표시합니다.

수정된 <button> 요소는 다음과 같아야 합니다:

<button id="myButton" onclick="alert('Button Clicked!')">Click Me</button>

코드를 추가한 후 index.html 파일을 저장합니다.

변경 사항을 확인하려면 인터페이스 상단의 Web 8080 탭으로 전환합니다. "Click Me" 버튼을 클릭하면 "Button Clicked!"라는 메시지가 표시되는 브라우저 알림이 나타날 것입니다.

addEventListener 를 사용하여 클릭 이벤트 처리

이 단계에서는 이벤트 처리를 위한 현대적이고 권장되는 접근 방식인 addEventListener 메서드를 사용합니다. 이 메서드를 사용하면 JavaScript 코드를 HTML 마크업에 섞지 않고 요소에 이벤트 핸들러를 연결할 수 있습니다. 이 방식은 "눈에 띄지 않는 JavaScript(unobtrusive JavaScript)"로 알려져 있으며, 더 깔끔하고 유지보수하기 쉬운 코드로 이어집니다.

먼저, 이전 단계에서 추가했던 onclick 속성을 제거하여 HTML 을 정리해 보겠습니다.

index.html 파일을 엽니다.
<button> 요소에서 onclick 속성을 제거합니다. 이제 다음과 같이 보여야 합니다:

<button id="myButton">Click Me</button>

이제 JavaScript 를 사용하여 이벤트 리스너를 추가해 보겠습니다.

파일 탐색기에서 script.js 파일을 엽니다. 현재 비어 있습니다.
script.js에 다음 코드를 추가합니다:

const button = document.querySelector("#myButton");

button.addEventListener("click", () => {
  alert("Clicked with addEventListener!");
});

이 코드를 분석해 보겠습니다:

document.querySelector('#myButton'): 이 줄은 ID 가 myButton인 버튼 요소를 DOM 에서 선택합니다.
addEventListener('click', ...): 이 메서드는 버튼 요소에서 호출됩니다. 두 가지 주요 인수를 받습니다:
- 첫 번째 인수는 수신할 이벤트 유형으로, 여기서는 'click'입니다.
- 두 번째 인수는 이벤트가 발생했을 때 실행될 "핸들러" 또는 "리스너" 함수입니다. 여기서는 익명 화살표 함수 () => { ... }를 사용하고 있습니다.

script.js 파일을 저장하고 Web 8080 탭으로 전환합니다. 버튼을 클릭하면 이제 "Clicked with addEventListener!"라는 메시지가 표시되는 알림을 볼 수 있습니다.

이벤트 핸들러 함수 정의

이 단계에서는 이벤트 핸들러를 위한 명명된 함수를 정의하여 코드를 더욱 깔끔하고 재사용 가능하게 만드는 방법을 배우게 됩니다. addEventListener 내부에 익명 함수를 직접 사용하는 대신, 별도의 함수를 정의한 다음 해당 함수의 이름을 리스너에 전달할 수 있습니다.

이 접근 방식은 이벤트 처리 로직이 복잡하거나 여러 이벤트 또는 요소에 대해 동일한 함수를 재사용하려는 경우에 유용합니다.

명명된 함수를 사용하도록 script.js 파일을 수정해 보겠습니다.

script.js 파일을 엽니다.
기존 코드를 다음 코드로 바꿉니다:

const button = document.querySelector("#myButton");

function handleClick() {
  button.textContent = "I was clicked!";
}

button.addEventListener("click", handleClick);

변경된 내용은 다음과 같습니다:

handleClick이라는 새 함수를 정의했습니다. 이 함수는 버튼이 클릭될 때 실행될 로직을 포함합니다. 이 경우 버튼의 텍스트를 변경합니다.
addEventListener에서는 이제 함수 이름 handleClick을 두 번째 인수로 전달합니다. 함수 자체의 참조를 전달하는 것이지, 함수를 호출하는 것이 아님에 유의하십시오 (즉, handleClick()이 아니라 handleClick입니다). 브라우저는 클릭 이벤트가 발생하면 자동으로 함수를 호출합니다.

script.js 파일을 저장하고 Web 8080 탭으로 이동합니다. 버튼을 클릭합니다. 이번에는 알림 대신 버튼의 텍스트가 "I was clicked!"로 변경되는 것을 볼 수 있습니다.

preventDefault 로 기본 동작 방지

이 단계에서는 event 객체와 가장 유용한 메서드 중 하나인 preventDefault()를 살펴보겠습니다. 이벤트가 발생하면 브라우저는 자동으로 핸들러 함수에 event 객체를 전달합니다. 이 객체는 이벤트에 대한 정보를 포함하며 이벤트의 동작을 제어할 수 있게 해줍니다.

일부 HTML 요소에는 기본 동작이 있습니다. 예를 들어, 링크 (<a> 태그) 의 기본 동작은 href 속성에 지정된 URL 로 이동하는 것입니다. event.preventDefault() 메서드를 사용하면 이 기본 동작이 발생하는 것을 막을 수 있습니다.

저희 index.html 파일에는 이미 myLink ID 를 가진 링크가 포함되어 있습니다. 이 링크가 이동하는 것을 방지하기 위해 이벤트 리스너를 추가해 보겠습니다.

script.js 파일을 엽니다.
파일 끝에 다음 코드를 추가합니다:

const link = document.querySelector("#myLink");

function handleLinkClick(event) {
  console.log("Link click detected, navigation prevented.");
  event.preventDefault();
}

link.addEventListener("click", handleLinkClick);

새로운 코드를 분석해 보겠습니다:

myLink ID 를 가진 <a> 요소를 선택합니다.
event라고 명명한 매개변수 하나를 받는 핸들러 함수 handleLinkClick을 정의합니다. 이것이 브라우저에서 제공하는 이벤트 객체가 됩니다.
함수 내에서 event.preventDefault()를 호출하여 브라우저가 링크를 따라가는 것을 중지합니다.
또한 핸들러가 실행되고 있음을 확인하기 위해 console.log 메시지를 추가합니다.

script.js 파일을 저장합니다. 이제 Web 8080 탭으로 이동합니다.

페이지의 아무 곳이나 마우스 오른쪽 버튼으로 클릭하고 "Inspect"를 선택하여 브라우저의 개발자 도구를 엽니다.
개발자 도구 내의 "Console" 탭으로 전환합니다.
"Visit LabEx (link will be disabled)" 링크를 클릭합니다.

두 가지 사항을 알 수 있습니다: 페이지가 labex.io로 이동하지 않으며, 콘솔에 "Link click detected, navigation prevented." 메시지가 나타납니다.

event.target 로 이벤트 대상 접근

마지막 단계에서는 event 객체의 또 다른 중요한 속성인 event.target에 대해 알아보겠습니다. 이 속성은 이벤트가 발생한 특정 요소를 참조할 수 있게 해줍니다. 이는 특히 부모 요소에 하나의 이벤트 리스너를 두고 여러 자식 요소의 이벤트를 관리할 때 (이벤트 위임이라고 하는 기법) 매우 유용합니다.

이 실습에서는 event.target을 더 간단한 맥락에서 사용할 것입니다. 즉, 별도의 변수 없이 클릭된 요소를 직접 수정하는 데 사용할 것입니다.

버튼에 대한 handleClick 함수를 수정하여 event.target을 사용하도록 해보겠습니다.

script.js 파일을 엽니다.
3 단계에서 작성한 handleClick 함수를 찾아 event 매개변수를 수락하고 event.target을 사용하도록 수정합니다.

기존 handleClick 함수를 이 새 버전으로 바꾸세요:

function handleClick(event) {
  // event.target 은 클릭된 버튼을 참조합니다.
  event.target.style.backgroundColor = "lightblue";
  event.target.textContent = "My color changed!";
}

자세한 설명입니다:

handleClick 함수는 이제 event 객체를 매개변수로 받습니다.
button 변수를 사용하는 대신, 이제 event.target을 사용하여 클릭된 요소를 참조합니다.
event.target.style.backgroundColor = 'lightblue'는 클릭된 요소의 배경색을 변경합니다.
event.target.textContent = 'My color changed!'는 해당 요소의 텍스트 내용을 변경합니다.

이제 전체 script.js 파일은 다음과 유사해야 합니다:

const button = document.querySelector("#myButton");

function handleClick(event) {
  // event.target 은 클릭된 버튼을 참조합니다.
  event.target.style.backgroundColor = "lightblue";
  event.target.textContent = "My color changed!";
}

button.addEventListener("click", handleClick);

const link = document.querySelector("#myLink");

function handleLinkClick(event) {
  console.log("Link click detected, navigation prevented.");
  event.preventDefault();
}

link.addEventListener("click", handleLinkClick);

파일을 저장하고 Web 8080 탭으로 전환합니다. 버튼을 클릭합니다. 버튼의 배경색이 하늘색으로 바뀌고 텍스트가 "My color changed!"로 업데이트되는 것을 볼 수 있습니다.

요약

JavaScript 이벤트 처리 실습을 완료하신 것을 축하드립니다! 사용자 동작에 반응하여 웹 페이지를 상호작용 가능하게 만드는 핵심 개념을 성공적으로 학습하셨습니다.

이번 실습에서는 다음 내용을 다루었습니다:

HTML 에서 직접 간단한 이벤트 처리를 위한 기본적인 onclick 속성.
관심사를 분리하고 JavaScript 코드를 깔끔하게 유지하기 위한 현대적이고 선호되는 addEventListener 메서드.
더 나은 코드 구성 및 재사용성을 위해 명명된 함수를 이벤트 핸들러로 정의하고 사용하는 방법.
기본 브라우저 동작을 중지하기 위해 event.preventDefault()를 사용하는 강력한 event 객체.
event.target 속성을 사용하여 이벤트를 트리거한 요소를 식별하는 방법.

이러한 기술은 프론트엔드 웹 개발의 기본이며 풍부하고 동적이며 사용자 친화적인 웹 애플리케이션을 만드는 데 있어 구성 요소가 될 것입니다. 이러한 개념을 계속 연습하여 숙달하십시오.