A!ha!

 웹 페이지에서 사용자의 행동은 대부분 이벤트라는 형태로 처리된다. 버튼 클릭, 마우스 이동, 키보드 입력과 같은 동작은 모두 브라우저가 감지하여 자바스크립트로 전달한다. 그런데 하나의 요소에서 발생한 이벤트가 해당 요소에서만 처리되는 것은 아니다. 실제로는 부모 요소와 자식 요소 사이를 이동하며 순차적으로 처리된다. 이 과정을 이벤트 전파라고 부른다. 이벤트 전파 개념을 이해하지 못하면 의도하지 않은 동작이 발생하거나, 코드가 복잡해질 수 있다. 이 글에서는 자바스크립트 이벤트 전파의 기본 개념부터 동작 방식, 그리고 실제 개발에서 왜 중요한지를 차분하게 정리한다. 1. 이벤트 전파의 기본 개념 이벤트 전파란 하나의 이벤트가 발생했을 때, 해당 이벤트가 여러 HTML 요소를 거쳐 전달되는 과정 을 의미한다. 예를 들어 버튼이 div 안에 들어 있는 구조라면, 버튼을 클릭했을 때 이벤트는 버튼에서 끝나지 않는다. 부모 요소와 상위 요소에도 영향을 미칠 수 있다. 이러한 동작 방식은 브라우저의 기본 설계에 포함된 개념이다. 2. HTML 구조와 이벤트의 관계 다음과 같은 구조를 생각해볼 수 있다. < div id = "container" > < button id = "btn" >클릭 </ button > </ div > 이 구조에서 버튼을 클릭하면 버튼 요소 div 요소 document 객체 순서로 이벤트가 전달된다. 이 흐름을 이해하는 것이 이벤트 전파의 출발점이다. 3. 이벤트 전파의 세 가지 단계 자바스크립트에서 이벤트는 다음 세 단계 를 거쳐 처리된다. 캡처링 단계 타깃 단계 버블링 단계 이 세 단계는 항상 같은 순서로 진행된다. 4. 캡처링 단계란 무엇인가 캡처링 단계는 이벤트가 가장 바깥 요소에서 시작해 , 이벤트가 발생한 실제 요소로 내려오는 과정 이다. 이 단계에서는 docum...

  웹 페이지에서 입력 폼은 사용자와 시스템을 연결하는 중요한 창구 역할을 한다. 로그인 화면, 검색창, 회원가입 폼과 같은 요소는 모두 사용자의 입력을 기반으로 동작한다. 하지만 화면에 입력창이 보인다고 해서 모든 사용자가 동일한 방식으로 이를 인식하는 것은 아니다. 특히 키보드만 사용하는 환경이나 화면 읽기 도구를 사용하는 경우, 입력 요소가 어떤 의미를 가지는지 명확하게 전달되지 않으면 사용성이 크게 떨어진다. 이러한 문제를 해결하기 위해 HTML에서는 label 요소를 제공하며, 이를 input 요소와 올바르게 연결하는 방식을 권장한다. 이 글에서는 label 과 input 을 왜 연결해야 하는지, 그 구조와 동작 원리, 그리고 실제 작성 시 주의해야 할 사항을 단계적으로 정리한다. 1. label 요소의 기본 역할 label 요소는 입력 요소에 대한 설명 텍스트 를 제공하는 역할을 한다. 단순히 글자를 보여주는 것이 아니라, 특정 입력창이 어떤 목적을 가지는지 명확하게 알려준다. 예를 들어 이메일 입력창, 비밀번호 입력창, 검색어 입력창은 각각 서로 다른 의미를 가지며, 이 의미를 전달하는 역할을 label 이 담당한다. 2. input 요소만 사용할 때 발생하는 문제 다음과 같은 입력창을 생각해볼 수 있다. < input type = "text" > 화면에는 입력칸이 보이지만, 이 입력칸이 무엇을 입력하는 공간인지 는 코드상으로 알기 어렵다. 이 경우 다음과 같은 문제가 발생한다. 화면 읽기 도구가 입력 목적을 설명하지 못함 클릭 가능한 영역이 작아 사용성이 떨어짐 코드의 의미가 불명확해 유지보수가 어려워짐 이러한 문제를 해결하기 위해 label 요소가 필요하다. 3. label과 input을 연결하는 기본 구조 label 과 input 은 for 와 id 속성을 통해 연결된다. < label for = "email" >이메일 주...