avatar
Published on

javascript event bubbling & capturing

Author
  • avatar
    Name
    yceffort

https://miro.medium.com/max/1200/1*Et5UjVPGLfF1L43T7ErrxQ.png

Javascript Event Capturing

https://codepen.io/yceffort/pen/GbVaaY

Event Capturing은 νŠΉμ • μš”μ†Œμ—μ„œ μ΄λ²€νŠΈκ°€ λ°œμƒν–ˆμ„ λ•Œ, μ΅œμƒμœ„ μš”μ†Œμ—μ„œ λΆ€ν„° 이벀트λ₯Ό νƒμƒ‰ν•˜μ—¬ νŠΉμ •μš”μ†ŒκΉŒμ§€ μ°Ύμ•„μ˜€λŠ” 이벀트 μ „νŒŒ 방식을 μ˜λ―Έν•œλ‹€. μœ„ μ˜ˆμ‹œμ—μ„œ κ°€μž₯ λ‚΄λΆ€μ˜ elementλ₯Ό ν΄λ¦­ν–ˆμ„ λ•Œ, μ΅œμƒμœ„ μš”μ†Œ λΆ€ν„° ν•΄λ‹Ή click이벀트λ₯Ό μ „νŒŒμ‹œμΌœ μ΄λ²€νŠΈκ°€ μ‹€ν–‰λ˜λŠ” 것을 λ³Ό 수 μžˆλ‹€.

Javascript Event Bubbling

https://codepen.io/yceffort/pen/Prrgob

λ°˜λŒ€λ‘œ Event Bubbling은 νŠΉμ •μš”μ†Œμ—μ„œ μ΄λ²€νŠΈκ°€ λ°œμƒν–ˆμ„ λ•Œ, ν•΄λ‹Ή μš”μ†Œμ—μ„œ λΆ€ν„° 이벀트λ₯Ό μ „νŒŒμ‹œν‚€λŠ” 것을 μ˜λ―Έν•œλ‹€. μœ„ μ˜ˆμ‹œμ—μ„œ κ°€μž₯ λ‚΄λΆ€μ˜ threeλ₯Ό ν΄λ¦­ν–ˆμ„λ•Œ, three, two, one으둜 μ΄λ²€νŠΈκ°€ μ „νŒŒλ˜λŠ” 것을 λ³Ό 수 μžˆλ‹€.

stopPropagation

stopPropagationλŠ” 이벀트의 μ „νŒŒ (Event Bubbling 및 Capturing)을 λ§‰λŠ” 것을 μ˜λ―Έν•œλ‹€. 즉, ν˜„μž¬κΉŒμ§€μ˜ 이벀트만 μ‹€ν–‰ν•˜κ³  μ΄ν›„μ˜ 이벀트λ₯Ό λ§‰κ²Œλœλ‹€.

preventDefault

preventDefaultλŠ” ν•΄λ‹Ή DOMμ—μ„œ λ‚΄κ°€ μ›ν•˜λŠ” 이벀트만 μ‹€ν–‰ν•˜κ³ , 기본적인 (μ·¨μ†Œν•  수 μžˆλŠ”) 이벀트λ₯Ό μ·¨μ†Œν•˜λŠ” 것을 μ˜λ―Έν•œλ‹€.

https://codepen.io/yceffort/pen/xovoRp

ν•΄λ‹€μ•„ μ˜ˆμ œμ—μ„œλŠ” preventDefaultλ₯Ό μ΄μš©ν•΄μ„œ a tag의 κΈ°λ³Έ 이벀트인 hrefλ₯Ό λ§‰λŠ” 것을 λ³Ό 수 μžˆλ‹€.

Issue on GitHub