e.preventDefault() 와 stopPropagation() 의 차이점

2023. 11. 21. 15:17· 개발/JavaScript
λͺ©μ°¨
  1. e.preventDefault()
  2. e.stopPropagation()
728x90
λ°˜μ‘ν˜•

 

두 κ°€μ§€ λͺ¨λ‘ 이벀트 λ°œμƒμ—μ„œ μ‚¬μš©λ˜λŠ” 것을 많이 봀을 κ²ƒμž…λ‹ˆλ‹€. λ‘˜ λ‹€ 기본적으둜 이벀트λ₯Ό μ€‘λ‹¨μ‹œν‚€λŠ” μ½”λ“œλžλ‹ˆλ‹€. 

ν•˜μ§€λ§Œ λ‹€λ₯Έ 점이 μžˆλ‹΅λ‹ˆλ‹€. 그것은 λ°”λ‘œ 이벀트 전달방식에 λ”°λΌμ„œ μ‚¬μš©λœλ‹€λŠ” κ²ƒμž…λ‹ˆλ‹€. 

 

e.preventDefault()

λŠ” 기본적으둜 고유의 이벀트 λ™μž‘μ„ μ€‘λ‹¨μ‹œν‚΅λ‹ˆλ‹€. 

 

 

e.stopPropagation()

μ€‘μ²©λ˜μ–΄μžˆλŠ” μ—˜λ¦¬λ¨ΌνŠΈλ“€ μ€‘μ—μ„œ ν•˜μœ„μ—μ„œ μƒμœ„λ‘œ μ΄λ²€νŠΈκ°€ μ „λ‹¬λ˜λŠ” 것을 μ€‘λ‹¨μ‹œν‚΅λ‹ˆλ‹€. 

즉, 고유 μžμ‹ λ§Œμ˜ μ΄λ²€νŠΈλ§Œμ„ κ°μ§€ν•˜λ„λ‘ν•©λ‹ˆλ‹€. 

 

 

 

 

728x90

'개발 > JavaScript' μΉ΄ν…Œκ³ λ¦¬μ˜ λ‹€λ₯Έ κΈ€

type vs interface λŠ” 뭐가 λ‹€λ₯΄μ§€?  (0) 2024.09.18
forEach vs map() 차이점  (0) 2024.05.18
localStorage vs Cookie λ§Œλ£Œμ‹œκ°„ μ„€μ •ν•˜κΈ°  (0) 2023.04.12
[μžλ°”μŠ€ν¬λ¦½νŠΈ] js vs jsx ? ν™•μž₯자 뭐가 λ‹€λ₯΄μ§€?  (0) 2022.12.30
Fetch API - 이미지 fetchingν•˜κΈ°  (0) 2022.09.28
  1. e.preventDefault()
  2. e.stopPropagation()
'개발/JavaScript' μΉ΄ν…Œκ³ λ¦¬μ˜ λ‹€λ₯Έ κΈ€
  • type vs interface λŠ” 뭐가 λ‹€λ₯΄μ§€?
  • forEach vs map() 차이점
  • localStorage vs Cookie λ§Œλ£Œμ‹œκ°„ μ„€μ •ν•˜κΈ°
  • [μžλ°”μŠ€ν¬λ¦½νŠΈ] js vs jsx ? ν™•μž₯자 뭐가 λ‹€λ₯΄μ§€?
밍(Ming) πŸˆβ€β¬›
밍(Ming) πŸˆβ€β¬›
πŸ‘©πŸ»β€πŸ’» Frontend Developer
밍(Ming) πŸˆβ€β¬›
Ming devlog
밍(Ming) πŸˆβ€β¬›
전체
였늘
μ–΄μ œ

곡지사항

  • About Ming 🐰
  • λΆ„λ₯˜ 전체보기 (261)
    • 개발 (255)
      • πŸ“ TIL (58)
      • ❌ 였λ₯˜ λ…ΈνŠΈ (23)
      • React (23)
      • Next.js (11)
      • React-Native (6)
      • JavaScript (10)
      • Flutter (19)
      • Database (1)
      • πŸ’¬ μ½”λ”©ν…ŒμŠ€νŠΈ (21)
      • πŸ“š English (9)
      • Etc... (25)
      • β›΅ ν•­ν•΄99 (49)
    • πŸ’» Dev (6)
      • πŸ“ TIL (4)
      • πŸ’¬ Algorithm (1)
      • Etc... (1)

인기 κΈ€

νƒœκ·Έ

  • 슀파λ₯΄νƒ€μ½”λ”©ν΄λŸ½
  • Firebase
  • nextjs
  • flutter
  • μ•Œκ³ λ¦¬μ¦˜
  • react
  • μžλ°”μŠ€ν¬λ¦½νŠΈ
  • TIL
  • Git
  • νƒ€μž…μŠ€ν¬λ¦½νŠΈ
  • ν•­ν•΄99
  • github
  • λ¦¬μ•‘νŠΈ
  • ReactNative
  • 개발자일기
  • λ¦¬μ•‘νŠΈλ„€μ΄ν‹°λΈŒ
  • μ½”ν…Œκ³΅λΆ€
  • 코딩곡뢀
  • todaywhatidid
  • ν”ŒλŸ¬ν„°
  • μ½”λ”©ν…ŒμŠ€νŠΈ
  • λΆ€νŠΈμΊ ν”„
  • μ΄μ½”λ…Έλ―ΈμŠ€νŠΈ
  • 개발자회고
  • μ˜μ–΄κ³΅λΆ€
  • react-native
  • twid
  • μ½”ν…Œ
  • ν”„λ‘œκ·Έλž˜λ¨ΈμŠ€
  • leetcode

졜근 λŒ“κΈ€

졜근 κΈ€

250x250
hELLO Β· Designed By μ •μƒμš°.v4.2.1
밍(Ming) πŸˆβ€β¬›
e.preventDefault() 와 stopPropagation() 의 차이점
μƒλ‹¨μœΌλ‘œ

ν‹°μŠ€ν† λ¦¬νˆ΄λ°”

κ°œμΈμ •λ³΄

  • ν‹°μŠ€ν† λ¦¬ ν™ˆ
  • 포럼
  • 둜그인

단좕킀

λ‚΄ λΈ”λ‘œκ·Έ

λ‚΄ λΈ”λ‘œκ·Έ - κ΄€λ¦¬μž ν™ˆ μ „ν™˜
Q
Q
μƒˆ κΈ€ μ“°κΈ°
W
W

λΈ”λ‘œκ·Έ κ²Œμ‹œκΈ€

κΈ€ μˆ˜μ • (κΆŒν•œ μžˆλŠ” 경우)
E
E
λŒ“κΈ€ μ˜μ—­μœΌλ‘œ 이동
C
C

λͺ¨λ“  μ˜μ—­

이 νŽ˜μ΄μ§€μ˜ URL 볡사
S
S
맨 μœ„λ‘œ 이동
T
T
ν‹°μŠ€ν† λ¦¬ ν™ˆ 이동
H
H
단좕킀 μ•ˆλ‚΄
Shift + /
⇧ + /

* λ‹¨μΆ•ν‚€λŠ” ν•œκΈ€/영문 λŒ€μ†Œλ¬Έμžλ‘œ 이용 κ°€λŠ₯ν•˜λ©°, ν‹°μŠ€ν† λ¦¬ κΈ°λ³Έ λ„λ©”μΈμ—μ„œλ§Œ λ™μž‘ν•©λ‹ˆλ‹€.