====== JavaScript 버블링 ====== * description : JavaScript 버블링 * author : 오션 * email : shlim@repia.com * lastupdate : 2023-01-26 Thu \\ ===== JavaScript 버블 =====
FORM
DIV

P

 \\ 가장 안쪽의 ''**%%

%%**''태그를 클릭하면 아래와 같이 이벤트가 발생합니다.\\ - ''**%%

%%**''할당된 onclick 핸들러가 동작합니다. - 외부의 ''**%%

%%**''에 할당된 핸들러가 동작합니다. - 그 외부의 ''**%%
%%**''에 할당된 핸들러가 동작합니다. - ''**%%document%%**'' 객체를 만날 때까지, 각 요소에 할당된 onclick 핸들러가 동작합니다. \\ {{:wiki:javascript:javascript_note:bubbling1.png?600|bubbling 1단계}}\\ {{:wiki:javascript:javascript_note:bubbling2.png?600|bubbling 2단계}}\\ {{:wiki:javascript:javascript_note:bubbling3.png?600|bubbling 3단계}}\\ {{:wiki:javascript:javascript_note:bubbling7.png?500|출처 - JavaScript Info}}\\ \\ 상기 방식으로 동작하기 때문에, ''**%%

%%**'' 요소를 클릭하면 ''**%%p ⇒ div ⇒ form%%**''의 순서대로 발생하는 alert창이 표시됩니다.\\ 이런 과정을 "버블링(bubbling)"이라고 하는데, 이는 물 속의 거품이 깊은 곳에서 얕은 곳으로 올라가는 것처럼\\ 이벤트가 하위 요소에서 상위 부모 요소로 거슬러올라가며 발생하기 때문입니다.\\ {{:wiki:javascript:javascript_note:bubbling8.png?500|출처 - JavaScript Info}}\\ **거의 모든 이벤트는 버블링됩니다.**\\ 상기 문장에서 핵심은 **"거의"**입니다.\\ 예를 들어, **''%%focus%%''** 이벤트는 버블링되지 않습니다. -- 중략 --\\ **''%%focus%%''** 이벤트는 규칙이라기 보다는 하나의 예외입니다.\\ 대부분의 이벤트는 버블링됩니다.\\ \\ FORM

DIV

P

\\ {{:wiki:javascript:javascript_note:bubbling4.png?600|}}\\ {{:wiki:javascript:javascript_note:bubbling5.png?600|}}\\ {{:wiki:javascript:javascript_note:bubbling6.png?600|}}\\ ===== Ref Link ==== [[https://ko.javascript.info/bubbling-and-capturing|버블링과 캡처링]]\\ [[https://www.w3schools.com/jsref/event_bubbles.asp|bubbles Event Property]]\\ {{tag> 오션 Javascript Bubbling bubble}}