버블링

JavaScript

이벤트 위임 (event delegation)

이벤트 위임 이벤트 위임은 캡쳐링과 버블링을 이용한 것으로, 여러 엘리먼트마다 각각 이벤트 핸들러를 할당하지 않고, 공통되는 부모에 이벤트 핸들러를 할당하여 이벤트를 관리하는 방식이다. 1) 여러 개의 자식 엘리먼트 이벤트를 한 번에 관리 : HTML의 읽기전용 속성인 데이터 속성을 사용하여 이벤트 위임을 구현할 수 있다. 데이터 속성 여기서 데이터 속성은 화면에 안 보이게 글이나 추가 정보를 엘리먼트에 담을 수 있는 속성으로 data- 로 시작하는 속성이다. ... 위처럼 html을 작성하면 각각의 데이터 속성을 읽는 방법은 아래와 같다. (대시는 camelCase로 변환된다.) var article = document.getElementById('electriccars'); article.datase..

JavaScript

이벤트 버블링과 캡쳐링

이벤트 흐름 표준 DOM 이벤트에서 정의한 이벤트 흐름엔 3가지 단계가 있다. 캡처링 단계 – 이벤트가 하위 요소로 전파되는 단계 타깃 단계 – 이벤트가 실제 타깃 요소에 전달되는 단계 버블링 단계 – 이벤트가 상위 요소로 전파되는 단계 이벤트 버블링 : 특정 화면 요소에서 이벤트가 발생했을 때 해당 이벤트가 더 상위의 화면 요소들로 전달되어 가는 특성 div 태그 한 개만 클릭했을 뿐인데 3개의 이벤트가 발생되는 이유는 브라우저가 이벤트를 감지하는 방식 때문이다. 브라우저는 특정 화면 요소에서 이벤트가 발생했을 때 그 이벤트를 최상위에 있는 화면 요소까지 이벤트를 전파시킨다. focus 이벤트를 포함한 몇몇 이벤트를 제외하고 거의 모든 이벤트는 버블링 된다. 이벤트 캡쳐링 : 이벤트 캡쳐는 이벤트 버블..

ㅇㄱ9
'버블링' 태그의 글 목록