자바스크립트 강의 EP_08 | 이벤트 다루기 1 | ES6 최신 문법 | DOM API | BOM API

1️⃣ HTML 이벤트란? (📜)

HTML 이벤트는 웹 브라우저가 사용자와 상호작용할 때 발생하는 사건입니다. 예를 들어, 사용자가 버튼을 클릭하거나 텍스트를 입력하면 이것은 이벤트로 간주됩니다. 이러한 이벤트는 웹 페이지가 동적으로 반응하도록 만듭니다. HTML 요소는 다양한 이벤트를 받을 수 있으며, 이를 통해 사용자와의 상호작용을 강화할 수 있습니다.

2️⃣ 이벤트 등록 방법 (🖱️)

이벤트를 등록하는 방법에는 여러 가지가 있습니다. 가장 기본적인 방법은 인라인으로 HTML 태그에 직접 이벤트 코드를 작성하는 것입니다. 또 다른 방법은 JavaScript를 사용하여 프로퍼티 리스너(Property Listener)나 addEventListener 메서드를 통해 이벤트를 등록하는 것입니다. 이 메서드는 실무에서 가장 많이 사용되며, 여러 이벤트 핸들러를 동일한 요소에 연결할 수 있는 유연성을 제공합니다.

3️⃣ 다양한 이벤트 종류 (🖥️)

웹 개발에서는 다양한 종류의 이벤트를 사용할 수 있습니다. 마우스 이벤트(클릭, 더블 클릭, 마우스 오버), 키보드 이벤트(키 입력, 키 릴리즈), 폼 이벤트(입력 필드 포커스, 폼 제출) 등이 있습니다. 각 이벤트는 사용자 행동에 대한 특정 반응을 정의할 수 있는 기회를 제공합니다. MDN 웹 문서에는 다양한 이벤트 종류가 상세히 설명되어 있습니다.

4️⃣ 이벤트 객체의 이해 (🔍)

이벤트 객체는 이벤트 핸들러에 전달되어 이벤트와 관련된 정보를 제공합니다. 예를 들어, 클릭 이벤트 객체는 클릭된 요소에 대한 정보를 포함합니다. 이벤트 객체는 이벤트의 종류에 따라 다양한 속성과 메서드를 포함하고 있으며, 이를 사용하여 더욱 정교한 이벤트 처리가 가능합니다.

5️⃣ 실습: 이벤트 적용하기 (🛠️)

실제로 이벤트를 웹 페이지에 적용해보는 것은 이론을 넘어 실무로 나아가는 중요한 단계입니다. HTML 파일에서 버튼을 생성하고, JavaScript를 통해 클릭 이벤트를 등록하여 버튼을 클릭할 때마다 콘솔에 메시지를 출력하는 간단한 실습을 통해 이벤트 처리의 기본을 익힐 수 있습니다. 이러한 실습을 통해 이벤트가 웹 페이지 상호작용을 어떻게 변화시키는지 직접 확인할 수 있습니다.

🌐 공식사이트

MDN Web Docs - Event Reference