- Published on
javascript event bubbling & capturing
- Author
- Name
- yceffort
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
λ₯Ό λ§λ κ²μ λ³Ό μ μλ€.