πŸ’» TIL 16 | 이벀트 버블링과 이벀트 μœ„μž„

hsk10271Β·2022λ…„ 4μ›” 8일
0

TIL

λͺ©λ‘ 보기
16/35
post-thumbnail

이번 μ±•ν„°λŠ” 이벀트 버블링과 이벀트 μœ„μž„μ— λŒ€ν•΄μ„œ λ‹€λ£¨μ—ˆμŠ΅λ‹ˆλ‹€.~0~
⚠️ μ •λ¦¬ν•œ λ‚΄μš©μ€ μ˜€νƒ€λ‚˜ 잘λͺ»λœ 정보가 μžˆμ„ 수 μžˆμŠ΅λ‹ˆλ‹€. λŒ“κΈ€λ‘œ μ•Œλ €μ£Όμ‹œλ©΄ κ°μ‚¬ν•˜κ² μŠ΅λ‹ˆλ‹€

πŸ“ƒ 였늘 κ³΅λΆ€ν•œ 것

<div onclick="alert('div에 ν• λ‹Ήν•œ ν•Έλ“€λŸ¬!')">
  <em><code>EM</code>을 ν΄λ¦­ν–ˆλŠ”λ°λ„ <code>DIV</code>에 ν• λ‹Ήν•œ ν•Έλ“€λŸ¬κ°€ λ™μž‘ν•©λ‹ˆλ‹€.</em>
</div>

μœ„μ˜ μ˜ˆμ‹œμ—μ„œ 보이듯 <em>을 ν΄λ¦­ν–ˆμŒμ—λ„ <div>에 ν• λ‹Ήν•œ ν•Έλ“€λŸ¬κ°€ λ™μž‘ν•œλ‹€. 이 μ΄μœ κ°€ λ¬΄μ—‡μΌκΉŒ? λ°”λ‘œ 이벀트 버블링 λ•Œλ¬Έμ΄λ‹€.

이벀트 버블링

ν•œ μš”μ†Œμ— μ΄λ²€νŠΈκ°€ λ°œμƒν•˜λ©΄, 이 μš”μ†Œμ— ν• λ‹Ήλœ ν•Έλ“€λŸ¬κ°€ λ™μž‘ν•˜κ³ , μ΄μ–΄μ„œ λΆ€λͺ¨ μš”μ†Œμ˜ ν•Έλ“€λŸ¬κ°€ λ™μž‘ν•œλ‹€. κ°€μž₯ μ΅œμƒλ‹¨μ˜ 쑰상 μš”μ†Œλ₯Ό λ§Œλ‚  λŒ€κΉŒμ§€ 이 과정이 λ°˜λ³΅λ˜λ©΄μ„œ μš”μ†Œ 각각에 ν• λ‹Ήλœ ν•Έλ“€λŸ¬κ°€ λ™μž‘ν•œλ‹€.

<form onclick="alert('form')">FORM
  <div onclick="alert('div')">DIV
    <p onclick="alert('p')">P</p>
  </div>
</form>

μœ„μ˜ μ˜ˆμ œμ—μ„œ μΌμ–΄λ‚˜λŠ” 일을 μˆœμ„œλŒ€λ‘œ μ•Œμ•„λ³΄μž.
1. μš°μ„  <p>에 ν• λ‹Ήλœ onclick이 λ™μž‘ν•œλ‹€.
2. κ·Έ λ‹€μŒ <div>에 ν• λ‹Ήλœ onclick이 λ™μž‘ν•œλ‹€.
3. κ·Έ λ‹€μŒμ€ <form>에 ν• λ‹Ήλœ onclick이 λ™μž‘ν•œλ‹€.
4. λ§ˆμ§€λ§‰μœΌλ‘œ document 객체λ₯Ό λ§Œλ‚  λ•ŒκΉŒμ§€ 각 μš”μ†Œμ— ν• λ‹Ήλœ onclick ν•Έλ“€λŸ¬κ°€ λ™μž‘ν•œλ‹€.

이런 흐름을 이벀트 버블링이라고 λΆ€λ₯Έλ‹€.

event.target

λΆ€λͺ¨ μš”μ†Œμ˜ ν•Έλ“€λŸ¬λŠ” μ΄λ²€νŠΈκ°€ μ •ν™•νžˆ μ–΄λ””μ„œ λ°œμƒν–ˆλŠ”μ§€ 등에 λŒ€ν•œ μžμ„Έν•œ 정보λ₯Ό 얻을 수 μžˆλ‹€. μ΄λ²€νŠΈκ°€ λ°œμƒν•œ κ°€μž₯ μ•ˆμͺ½ μš”μ†ŒλŠ” targetμš”μ†Œλ‘œ 뢈리고 event.target을 μ‚¬μš©ν•΄ μ ‘κ·Όν•  수 μžˆλ‹€.

이벀트 μœ„μž„

캑처링과 버블링을 ν™œμš©ν•˜λ©΄ κ°•λ ₯ν•œ 이벀트 핸듀링 νŒ¨ν„΄μΈ 이벀트 μœ„μž„(이벀트 λΈλ¦¬κ²Œμ΄μ…˜)을 κ΅¬ν˜„ν•  수 μžˆλ‹€. 이벀트 μœ„μž„μ€ λΉ„μŠ·ν•œ λ°©μ‹μœΌλ‘œ μ—¬λŸ¬ μš”μ†Œλ₯Ό 닀뀄야 ν•  λ•Œ μ‚¬μš©ν•œλ‹€. 이벀트 μœ„μž„μ„ μ‚¬μš©ν•˜λ©΄ μš”μ†Œλ§ˆλ‹€ ν•Έλ“€λŸ¬λ₯Ό ν• λ‹Ήν•˜μ§€ μ•Šκ³  μš”μ†Œμ˜ 곡톡 쑰상에 이벀트 ν•Έλ“€λŸ¬λ₯Ό 단 ν•˜λ‚˜λ§Œ 할당해도 μ—¬λŸ¬ μš”μ†Œλ₯Ό ν•œκΊΌλ²ˆμ— λ‹€λ₯Ό 수 μžˆλ‹€.

곡톡 쑰상에 ν• λ‹Ήν•œ ν•Έλ“€λŸ¬μ—μ„œ event.target을 μ΄μš©ν•˜λ©΄ μ‹€μ œ μ–΄λ””μ„œ μ΄λ²€νŠΈκ°€ λ°œμƒν–ˆλŠ”μ§€ μ•Œ 수 μžˆλ‹€.

즉 λ‹€μŒκ³Ό 같은 μ•Œκ³ λ¦¬μ¦˜μœΌλ‘œ λ™μž‘ν•œλ‹€.
1. μ»¨ν…Œμ΄λ„ˆμ— ν•˜λ‚˜μ˜ ν•Έλ“€λŸ¬λ₯Ό ν• λ‹Ήν•œλ‹€.
2. ν•Έλ“€λŸ¬μ˜ event.target을 μ‚¬μš©ν•΄ μ΄λ²€νŠΈκ°€ λ°œμƒν•œ μš”μ†Œκ°€ 어디인지 μ•Œμ•„λ‚Έλ‹€.
3. μ›ν•˜λŠ” μš”μ†Œμ—μ„œ μ΄λ²€νŠΈκ°€ λ°œμƒν–ˆλ‹€κ³  ν™•μΈλ˜λ©΄ 이벀트λ₯Ό ν•Έλ“€λ§ν•œλ‹€.

πŸ”₯ 였늘의 λŠλ‚€μ 

μ–΄μ œ 과제 μ œμΆœμ„ ν•˜κ³  였늘 λ©΄μ ‘ μŠ€ν„°λ””λ₯Ό μ§„ν–‰ν•˜μ˜€λ‹€. μ•„λ¬΄λž˜λ„ μ‹œκ°„μ΄ μ—†μ–΄μ„œ μ€€λΉ„κ°€ 많이 λ―Έν‘ν–ˆλ˜ 것 κ°™λ‹€. λΆ„λͺ… μ•„λŠ”λ° 말둜 λ±‰λŠ”λ‹€λŠ” 것은 μ°Έ μ–΄λ €μš΄ 일이닀.πŸ˜‚ 면접을 ν•  λ•Œ μ–΄λ–»κ²Œ ν•΄μ•Όν•˜λŠ”μ§€ 쑰금, μ•„μ£Ό 쑰금 μ•Œκ²Œ λ˜μ—ˆλ‹€. λ‹€μŒ λ©΄μ ‘λΆ€ν„°λŠ” λ°œμ „λœ λͺ¨μŠ΅μ΄ λ³΄μ˜€μœΌλ©΄ μ’‹κ² λ‹€.

λ˜ν•œ, κ°•μ˜λ₯Ό 15μΌλ™μ•ˆ μ§„ν–‰ν•˜λ©΄μ„œ 처음으둜 λ°€λ Έλ‹€.🀯 3κ°œλ°–μ— μ•ˆλ‚¨μ•„μ„œ λ‹€ λ“£κ³  자고 μ‹Άμ—ˆμ§€λ§Œ.. μ—λŸ¬κ°€ λ‚΄ 발λͺ©μ„ λΆ™μž‘μ•˜λ‹€.γ… γ…  κ°•μ˜λŠ” λΆ„λͺ… 20λΆ„μ§œλ¦¬μΈλ° μ™œ λ‚œ 1μ‹œκ°„ 이상을 μ“°λŠ”κ±΄μ§€,, μ΄ν•΄ν•˜λ©΄μ„œ μ‹€μŠ΅ λ”°λΌκ°€λŠ” 것 μ‘°μ°¨ λ²…μ°Όλ‹€. μ»΄ν¬λ„ŒνŠΈ 뢄리, 낙관적 μ—…λ°μ΄νŠΈ(이건 내일 κ°•μ˜λ₯Ό λ‹€ λ“£κ³  정리해보도둝 ν•˜κ² λ‹€)도 μƒκ°ν•΄μ„œ 코딩을 ν•΄μ•Όν•œλ‹€λŠ” 것. 맀우 ν₯λ―Έλ‘œμ› κ³  ν”„λ‘ νŠΈμ—”λ“œ 개발자의 역할도 살짝 μ—Ώλ³Έ λŠλ‚Œγ…Žγ…Ž.
κ°•μ˜μ—μ„œ 쀑간에 이벀트 μœ„μž„(event delegation)을 μ‚¬μš©ν•΄μ„œ μ½”λ“œλ₯Ό μž‘μ„±ν•˜μ˜€λŠ”λ° μ–΄μ œ κ³Όμ œμ—μ„œ λ‚΄κ°€ μ‚¬μš©ν–ˆλ˜ λ‚΄μš©μ΄μ—ˆλ‹€. 사싀 μ“°λŠ” 이유λ₯Ό λͺ…ν™•ν•˜κ²Œ μ•Œμ§€ λͺ»ν–ˆλŠ”데 κ·Έ 뢀뢄을 ν•΄κ²°ν•˜κ²Œ λ˜μ–΄μ„œ μ’‹μ•˜λ‹€.

μ–΄μ œ λ‘œν† μ˜ νŠΉκ°•μ΄ μžˆμ—ˆλŠ”λ° 덕뢄에 μ—¬λŸ¬λΆ€λΆ„μ—μ„œ κΉ¨λ‹¬μŒλ„ μ–»κ³  μžκ·Ήλ„ λ°›μ•˜λ‹€. 사싀 μž‘λ…„μ— 프젝할 λ•Œ nuxt.jsλ₯Ό μ‚¬μš©ν–ˆμ—ˆλŠ”λ° μ™œ ssgλ₯Ό μ‚¬μš©ν•˜λŠ”μ§€ λͺ¨λ₯΄κ³  μ‚¬μš©ν–ˆμ—ˆλ‹€. μ‚¬μš©ν•΄λ΄μ„œ νŠΉκ°•μ„ 듀을 λ•Œ λ”μš± ν₯λ―Έλ‘œμ› μ§€λ§Œ 그만큼 과거의 λ‚˜λŠ” μ•„λŠ” 것이 정말 μ—†μ—ˆκ΅¬λ‚˜ μ‹Άμ—ˆλ‹€.πŸ˜‚

주말에 μŠ€ν„°λ”” 곡뢀도 ν•˜κ³  λ°€λ¦° κ°•μ˜ μ–Όλ₯Έ λ“£μž!

πŸ—£ 였늘의 TMI

야ꡬ κ°œλ§‰ν•˜κ³  SSGκ°€ 야ꡬ 6μ—°μŠΉμ„ ν–ˆλ‹€.^^ 였예~ 1μœ„λΌλ‹ˆ!! 이런 날도 μžˆκ΅¬λ‚˜! 햅삐

Refer

ν”„λ‘œκ·Έλž˜λ¨ΈμŠ€ λ°λΈŒμ½”μŠ€
버블링과 캑처링
이벀트 μœ„μž„

였늘의 λ‚΄μš© 정리

λ°λΈŒμ½”μŠ€ Day15

profile
맀 μˆœκ°„ μ„±μž₯ν•˜λŠ” κ°œλ°œμžκ°€ 되렀고 λ…Έλ ₯ν•˜κ³  μžˆμŠ΅λ‹ˆλ‹€.

2개의 λŒ“κΈ€

comment-user-thumbnail
2022λ…„ 4μ›” 8일

크...πŸ‘πŸ‘πŸ‘

tmi) μ €λŠ” νƒ€μ΄κ±°μ¦ˆμž…λ‹ˆλ‹€...

1개의 λ‹΅κΈ€