JavaScript 핵심 개념 에 대해 이야기하면서 UI 개발 작업을 하면서 " 이벤트 전파 "는 가장 중요한 주제 중 하나입니다.

이 기사에서는 이벤트 전파( 버블링 , 캡처 및 위임) 의 개념을 살펴보겠습니다 .

DIV 가 있는 간단한 UI를 가정해 보겠습니다. " DIV" 내부에는 " FORM "이 있고 해당 양식 에는 하나의 " BUTTON "도 있습니다.

이제 div, form 및 button과 같은 세 가지 태그 모두에 EVENT LISTENERS를 추가하는 간단한 JavaScript 코드를 작성해 보겠습니다 .

1. BUBBLING : 이름에서 알 수 있듯이 거품처럼이벤트 가 아래 에서 위로 이동합니다. 위의 JS 코드에 따라 항목을 클릭하면 tagName이 경고로 표시됩니다.

이제 알 수 있듯이 경고의 흐름은 BUTTON -> FORM -> DIV 입니다.

2. CAPTURING(또는 TRICKLING) : 위에서 아래로 무엇이든 캡쳐하듯이 이름에서 알 수 있듯이 위에서 아래로 이벤트가 발생합니다.

트리클링을 위한 JS 코드:

eventCapturingByRounit(codepen.io)

stopPropagation() 메서드

이제 Bubbling이나 Trickling을 실행하고 싶지 않다고 가정해 보겠습니다. 즉, 버튼을 클릭하면 onClick 버튼 이벤트만 트리거되기를 원합니다.

이벤트 위임 :-

캡처 및 버블링을 통해 이벤트 위임 이라는 가장 강력한 이벤트 처리 패턴 중 하나를 구현할 수 있습니다 .

아이디어는 유사한 방식으로 처리되는 많은 요소가 있는 경우 각 요소에 처리기를 할당하는 대신 공통 조상에 단일 처리기를 배치한다는 것입니다.

Rounit Sinha(codepen.io)의 eventDelegation

예: MOBILE, HEADPHONE 등과 같은 다양한 범주가 있는 E-Comm 앱이 있다고 가정합니다(코드에 표시됨).

이제 모든 카테고리에 이벤트 리스너를 추가할 필요가 없습니다. 여기에서 "제품" 클래스인 상위 div에만 이벤트 리스너를 추가할 수 있습니다.

이제 모든 범주의 tagName이 "span"이므로 tagName이 "span"인 항목만 필터링했으며 이제 tagName이 선택된 항목의 경로 이름으로만 트리거됩니다.

자세한 내용은 이벤트 위임(javascript.info)을 참조하세요.