이벤트 전파 DOM 트리 상에 존재하는 DOM 요소 노드에서 발생한 이벤트는 DOM 트리를 통해 전파된다. 생성된 이벤트 객체는 이벤트를 발생시킨 DOM 요소인 이벤트 타겟(event target)을 중심으로 DOM 트리를 통해 전파된다. // 이벤트 전파 3단계 1. 캡처링 단계(capturing phase) : 이벤트가 상위 요소에서 하위 요소 방향으로 전파(上 -> 下) 2. 타겟 단계(target phasae) : 이벤트가 이벤트 타겟에 도달 3. 버블링 단계(bubbling phase) : 이벤트가 하위 요소에서 상위 요소 방향으로 전파(下 -> 上) apple banana orange 이처럼 이벤트는 이벤트를 발생시킨 이벤트 타깃은 물론 상위 DOM 요소에서도 캐치할 수 있다. 대부분의 이벤트..

이벤트 핸들러 등록 이벤트 핸들러 프로퍼티 방식 addEventListener 메서드 방식 Click me Click me Click me 동일한 HTML 요소에서 발생한 동일한 이벤트에 대해 이벤트 핸들러 프로퍼티 방식은 하나 이상의 이벤트 핸들러를 등록할 수 없지만, addEventListener 메서드 방식은 하나 이상의 이벤트 핸들러를 등록할 수 있고, 이때 이벤트 핸들러는 등록된 순서대로 호출된다. 단, addEventListener 메서드를 통해 참조가 동일한 이벤트 핸들러를 중복 등록하면 하나의 이벤트 핸들러만 등록된다. 이벤트 핸들러 제거 이벤트 핸들러 프로퍼티 방식 Click me removeEventListener 메서드 방식 Click me 이벤트 객체 이벤트가 발생하면 이벤트에 관련..

Event 브라우저는 처리해야 할 특정 사건이 발생하면 이를 감지하여 이벤트(event)를 발생(trigger) 시킨다. 이벤트가 발생했을 때 호출될 함수를 이벤트 핸들러(event handler)라고 하고, 이벤트가 발생했을 때 브라우저에게 이벤트 핸들러의 호출을 위임하는 것을 이벤트 핸들러 등록이라 한다. 이벤트와 그에 대응하는 함수(이벤트 핸들러)를 통해 사용자와 애플리케이션은 상호작용을 할 수 있다. 이와 같이 프로그램의 흐름을 이벤트 중심으로 제어하는 프로그래밍 방식을 이벤트 드리븐 프로그래밍(event-driven programming)이라 한다. Event type (이벤트 타입) 마우스 이벤트 // click 마우스 버튼을 클릭했을 때 // dblclick 마우스 버튼을 더블 클릭했을 때 ..