Search
πŸŽ‰

EVENT

πŸ§‘πŸΌβ€πŸš€ Eventλ₯Ό μ•Œμ•„μ•Ό ν•˜λŠ” 이유

❗input창에 값을 μž…λ ₯ν•˜κ³ , μ—”ν„°λ₯Ό 쳀을 λ•Œ μ§€ν•˜μ² μ—­μ„ λ¦¬μŠ€νŠΈμ— μΆ”κ°€ν•˜κ³  μ‹Άλ‹€λ©΄? β—μ‚­μ œ λ²„νŠΌμ„ λˆŒλ €μ„ λ•Œ μ§€ν•˜μ²  역을 μ‚­μ œν•˜κ³  μ‹Άλ‹€λ©΄? β—μΈν„°λ ‰ν‹°λΈŒν•œ μ‚¬μš©μž κ²½ν—˜μ„ λ§Œλ“€κ³  μ‹Άλ‹€λ©΄?
μœ„μ™€ 같은 이벀트λ₯Ό μœ μ—°ν•˜κ²Œ μ²˜λ¦¬ν•˜κΈ° μœ„ν•΄μ„œ μš°λ¦¬λŠ” λ°˜λ“œμ‹œ 이벀트λ₯Ό μ•Œμ•„μ•Όν•©λ‹ˆλ‹€. 동적인 웹은 μ‚¬μš©μžμ™€ μƒν˜Έμž‘μš©μ΄ 잘 λ˜μ•Ό ν•©λ‹ˆλ‹€. 그리고 κ·Έ μƒν˜Έμž‘μš©μ€ μ–΄λ–€ μ΄λ²€νŠΈμ— μ˜ν•΄ λ°œμƒν•©λ‹ˆλ‹€. κ·Έλž˜μ„œ ν”„λ‘ νŠΈμ—”λ“œμ—μ„œ λ§Žμ€ μΈν„°λ ‰μ…˜μ€ λͺ¨λ‘Β Eventλ₯Ό μ²˜λ¦¬ν•˜λŠ” 것과 κΉŠμ€ 관련이 μžˆμŠ΅λ‹ˆλ‹€. 그럼 EventλΌλŠ” 사건을 λ§Œλ‚˜λŸ¬ κ°€λ³ΌκΉŒμš”?

πŸ™‹πŸ»β€β™‚οΈ 이 λ¬Έμ„œλ₯Ό 보고 λ‚˜λ©΄

이벀트 μ’…λ₯˜λ₯Ό μ΅œμ†Œ 3가지 이상 말할 수 μžˆλ‹€.
DOM Element에 이벀트λ₯Ό 바인딩할 수 μžˆλ‹€.
이벀트의 흐름을 μ œμ–΄ν•  수 μžˆλ‹€.
이벀트 μœ„μž„μ„ μ‚¬μš©ν•  수 μžˆλ‹€.

πŸŽ‰ 이벀트

웹을 νƒμƒ‰ν•˜λŠ” λ™μ•ˆ λΈŒλΌμš°μ €λŠ” μ—¬λŸ¬ μ’…λ₯˜μ˜ 이벀트λ₯Ό λ“±λ‘ν•©λ‹ˆλ‹€. 이벀트(event)λŠ” μ–΄λ–€ 사건을 μ˜λ―Έν•˜λŠ”λ°μš”. λΈŒλΌμš°μ €μ—μ„œμ˜ μ‚¬κ±΄μ΄λž€ μ‚¬μš©μžκ°€ 클릭 ν–ˆμ„ 'λ•Œ', μŠ€ν¬λ‘€μ„ ν–ˆμ„ 'λ•Œ', ν…μŠ€νŠΈλ₯Ό μž…λ ₯ν–ˆμ„ 'λ•Œ'와 같은 것을 μ˜λ―Έν•©λ‹ˆλ‹€. μš°λ¦¬λŠ” 이제 μ‚¬μš©μžκ°€ μ§€ν•˜μ²  μ—­ 이름을 μž…λ ₯ν•˜κ³  μ—”ν„°λ₯Ό μž…λ ₯ν–ˆμ„ 'λ•Œ', μ‚­μ œ λ²„νŠΌμ„ μž…λ ₯ν–ˆμ„ 'λ•Œ'와 같은 μ΄λ²€νŠΈλ“€μ„ λ‹€λ£° 수 μžˆμ–΄μ•Όν•©λ‹ˆλ‹€.

1. 이벀트의 μ’…λ₯˜

μ‚¬μš©μžμ˜ 이벀트λ₯Ό 닀루기 μœ„ν•΄μ„œλŠ” λ¨Όμ €, 이벀트의 μ’…λ₯˜μ— λŒ€ν•΄ μ•Œμ•„μ•Όν•©λ‹ˆλ‹€. 이 κΈ€μ—μ„œλŠ” 기본적인 μ΄λ²€νŠΈλ“€μ„ λ‹€λ£Ήλ‹ˆλ‹€.
<h2 class="font-size-20 mb-0 pb-0">1)μ‚¬μš©μž μΈν„°νŽ˜μ΄μŠ€ 이벀트</h2>
HTML
μ‚¬μš©μž μΈν„°νŽ˜μ΄μŠ€(UI)μ΄λ²€νŠΈλŠ” λΈŒλΌμš°μ €κ°€ λ‘œλ“œν•œ HTMLνŽ˜μ΄μ§€κ°€ μ•„λ‹Œ λΈŒλΌμš°μ € 창을 μ‚¬μš©ν•  λ•Œ λ°œμƒν•˜λŠ” μ΄λ²€νŠΈμž…λ‹ˆλ‹€. 예λ₯Ό λ“€μ–΄, νŽ˜μ΄μ§€κ°€ λ‘œλ“œλ˜μ—ˆλ‹€κ±°λ‚˜ λΈŒλΌμš°μ € 창의 크기가 μ‘°μ •λœ κ²½μš°μ— λ°œμƒν•˜λŠ” μ΄λ²€νŠΈλ“€μž…λ‹ˆλ‹€.
μ‚¬μš©μž μΈν„°νŽ˜μ΄μŠ€(UI) 이벀트 μ’…λ₯˜
Search
이벀트
μ„€λͺ…
unload
Open
μ›Ή νŽ˜μ΄μ§€κ°€ unload 될 λ•Œ (μƒˆλ‘œμš΄ νŽ˜μ΄μ§€λ₯Ό μš”μ²­ν•œ 경우)
error
Open
λΈŒλΌμš°μ €κ°€ μžλ°”μŠ€ν¬λ¦½νŠΈ 였λ₯˜λ₯Ό λ§Œλ‚¬κ±°λ‚˜ μš”μ²­ν•œ μžμ›μ΄ μ‘΄μž¬ν•˜μ§€ μ•ŠλŠ” 경우
resize
Open
λΈŒλΌμš°μ € 창의 크기λ₯Ό μ‘°μ •ν–ˆμ„ λ•Œ
scroll
Open
μ‚¬μš©μžκ°€ νŽ˜μ΄μ§€λ₯Ό μœ„μ•„λž˜λ‘œ 슀크둀 ν•  λ•Œ
<h2 class="font-size-20 mb-0 pb-0">2)ν‚€λ³΄λ“œ 이벀트</h2>
HTML
ν‚€λ³΄λ“œ μ΄λ²€νŠΈλŠ” μ‚¬μš©μžκ°€ ν‚€λ³΄λ“œλ₯Ό μ΄μš©ν•  λ•Œ λ°œμƒν•©λ‹ˆλ‹€.Β keydownμ΄λ‚˜Β keypressμ΄λ²€νŠΈμ— λŒ€ν•œ event κ°μ²΄λŠ” μ–΄λ–€ ν‚€κ°€ λˆŒλ ΈλŠ”μ§€λ₯Ό μ•Œλ €μ£ΌλŠ” 속성을 가지고 μžˆμŠ΅λ‹ˆλ‹€.
ν‚€λ³΄λ“œ 이벀트 μ’…λ₯˜
Search
이벀트
μ„€λͺ…
keydown
Open
μ‚¬μš©μžκ°€ ν‚€λ₯Ό 처음 λˆŒλ €μ„ λ•Œ(ν‚€κ°€ 눌린 λ™μ•ˆμ€ κ³„μ†ν•΄μ„œ λ°œμƒ)
keyup
Open
μ‚¬μš©μžκ°€ ν‚€λ₯Ό λ—„ λ•Œ
keypress
Open
μ‚¬μš©μžκ°€ ν‚€λ₯Ό λˆŒλ €λ‹€κ°€ λ–Όμ–΄μ„œ λ¬Έμžκ°€ 화면에 λ‚˜νƒ€λ‚˜κ²Œ 되면 λ°œμƒν•œλ‹€.ν™”μ‚΄ν‘œ ν‚€λ₯Ό λˆ„λ₯Ό λ•Œ keydown μ΄λ²€νŠΈλŠ” λ°œμƒν•˜μ§€λ§Œ 이 μ΄λ²€νŠΈλŠ” λ°œμƒν•˜μ§€ μ•ŠλŠ”λ‹€.μ‚¬μš©μžκ°€ ν‚€λ₯Ό 계속 λˆ„λ₯΄κ³  있으면 μ΄λ²€νŠΈκ°€ 반볡적으둜 λ°œμƒν•œλ‹€.
<h2 class="font-size-20 mb-0 pb-0">3)마우슀 이벀트</h2>
HTML
마우슀 μ΄λ²€νŠΈλŠ” 마우슀λ₯Ό μ›€μ§μ΄κ±°λ‚˜ λ²„νŠΌμ„ ν΄λ¦­ν–ˆμ„ λ•Œ λ°œμƒν•©λ‹ˆλ‹€.
마우슀 이벀트 μ’…λ₯˜
Search
이벀트
μ„€λͺ…
click
Open
마우슀λ₯Ό ν΄λ¦­ν–ˆμ„ λ•Œ
dblclick
Open
마우슀λ₯Ό 더블 ν΄λ¦­ν–ˆμ„ λ•Œ
mousedown
Open
마우슀λ₯Ό λˆ„λ₯΄κ³  μžˆμ„ λ•Œ
mouseup
Open
μš”μ†Œ μœ„μ—μ„œ λˆ„λ₯΄κ³  있던 마우슀λ₯Ό λ—„ λ•Œ
mousemove
Open
마우슀λ₯Ό 움직일 λ•Œ(ν„°μΉ˜μŠ€ν¬λ¦°μ—μ„œλŠ” λ™μž‘ν•˜μ§€ μ•ŠμŒ)
mouseover
Open
μš”μ†Œ μœ„λ‘œ 마우슀λ₯Ό μ›€μ§μ˜€μ„ λ•Œ(ν„°μΉ˜μŠ€ν¬λ¦°μ—μ„œλŠ” λ™μž‘ν•˜μ§€ μ•ŠμŒ)
mouseout
Open
μš”μ†Œ λ°”κΉ₯으둜 마우슀λ₯Ό μ›€μ§μ˜€μ„ λ•Œ(ν„°μΉ˜μŠ€ν¬λ¦°μ—μ„œλŠ” λ™μž‘ν•˜μ§€ μ•ŠμŒ)
<h2 class="font-size-20 mb-0 pb-0">4) πŸ” focus와 blur 이벀트</h2>
HTML
μ‚¬μš©μžκ°€ μƒν˜Έμž‘μš©μ„ ν•  수 μžˆλŠ” λ§ν¬λ‚˜ 폼 μš”μ†Œ 같은 HTML μš”μ†ŒλŠ” 포컀슀λ₯Ό 받을 수 μžˆμŠ΅λ‹ˆλ‹€. 이런 μš”μ†Œλ“€μ€ μžμ‹ μ΄ 포컀슀λ₯Ό κ°–κ±°λ‚˜ μžƒμ„ λ•Œ 이벀트λ₯Ό λ°œμƒμ‹œν‚΅λ‹ˆλ‹€. 이 이벀트λ₯Ό ν™œμš©ν•˜λŠ” κ²½μš°λŠ” λ‹€μŒκ³Ό κ°™μŠ΅λ‹ˆλ‹€.
β€’
μ‚¬μš©μžκ°€ 폼의 μš”μ†Œλ“€κ³Ό μƒν˜Έμ§μš©μ„ ν•  λ•Œ λ„μ›€λ§μ΄λ‚˜ ν”Όλ“œλ°±μ„ μ œκ³΅ν•˜κ³ μž ν•˜λŠ” 경우(λŒ€λΆ€λΆ„ 도움말은 μ‹€μ œ μ‚¬μš©μžκ°€ μƒν˜Έμ§μš©μ„ ν•˜λŠ” μš”μ†Œκ°€ μ•„λ‹Œ λ‹€λ₯Έ μš”μ†Œλ₯Ό 톡해 보여쀀닀.)
β€’
μ‚¬μš©μžκ°€ (폼을 μ œμΆœν•  λ•ŒκΉŒμ§€ κΈ°λ‹€λ¦¬λŠ” λŒ€μ‹ ) μ–΄λŠ ν•œ μš”μ†Œμ—μ„œ λ‹€λ₯Έ μš”μ†Œλ‘œ μ΄λ™ν–ˆμ„ λ•Œ μœ νš¨μ„±κ²€μ‚¬λ₯Ό μˆ˜ν–‰ν•  ν•„μš”κ°€ μžˆλŠ” 경우
포컀슀 이벀트 μ’…λ₯˜
Search
이벀트
μ„€λͺ…
focus/focusin
Open
μš”μ†Œκ°€ 포컀슀λ₯Ό μ–»μ—ˆμ„ λ•Œ
blur/focusout
Open
μš”μ†Œκ°€ 포컀슀λ₯Ό μžƒμ—ˆμ„ λ•Œ

2. 이벀트 ν•Έλ“€λŸ¬

μ‚¬μš©μžκ°€ μ›Ή νŽ˜μ΄μ§€μ˜ HTMLκ³Ό μƒν˜Έμž‘μš©ν•  λ•Œ 이벀트λ₯Ό ν•Έλ“€λ§ν•˜λ„λ‘ ν”„λ‘œκ·Έλž˜λ°ν•  수 μžˆμŠ΅λ‹ˆλ‹€. 이벀트 핸듀링 ν•˜λŠ” λ°©λ²•μ—λŠ” 크게 3가지가 μžˆμŠ΅λ‹ˆλ‹€.
1.
HTML 이벀트 ν•Έλ“€λŸ¬.
2.
전톡적인 DOM 이벀트 ν•Έλ“€λŸ¬

3. 이벀트 λ¦¬μŠ€λ„ˆ(Event Listener)

κ·ΈλŸ¬λ‚˜ 1,2번의 λ°©λ²•μ˜ 경우 잘 μ‚¬μš©λ˜μ§€ μ•Šκ³ , 3번의 λ°©λ²•μœΌλ‘œ κ°€μž₯ 많이 이벀트λ₯Ό λ°”μΈλ”©ν•©λ‹ˆλ‹€. λ”°λΌμ„œ 이 κΈ€μ—μ„œλŠ” 3번째 λ°©λ²•λ§Œ μ†Œκ°œν•©λ‹ˆλ‹€.

이벀트 λ¦¬μŠ€λ„ˆ(Event Listener) ν™œμš©

function onAddStationHandler() { // 이벀트 처리 λ‘œμ§μ„ κ΅¬ν˜„ν•œλ‹€. } // μ§€ν•˜μ²  μ—­ μΆ”κ°€ λ²„νŠΌμ˜ μš”μ†Œλ₯Ό κ°€μ Έμ˜¨λ‹€. const $stationAddButton = document.querySelector("#station-add-btn"); // 클릭 μ΄λ²€νŠΈκ°€ λ°œμƒν–ˆμ„ λ•Œ onAddStationHandlerν•¨μˆ˜κ°€ μ‹€ν–‰λ˜λ„λ‘ 바인딩 ν•œλ‹€. $stationAddButton.addEventListener('click', onAddStationHandler);
JavaScript
1.
click: λŒ€κΈ°ν•˜κ³ μž ν•˜λŠ” 이벀트. μœ„ μ˜ˆμ œμ—μ„œλŠ” 클릭 이벀트λ₯Ό κΈ°λ‹€λ¦½λ‹ˆλ‹€.
2.
onAddStationHandlerΒ :μ΄λ²€νŠΈκ°€ λ°œμƒν–ˆμ„ λ•Œ 싀행될 μ½”λ“œ. μ˜ˆμ œμ—μ„œλŠ” onAddStationHandler() ν•¨μˆ˜λ₯Ό μ‚¬μš©ν•©λ‹ˆλ‹€. 이 λ•Œ κ΄„ν˜Έλ₯Ό μƒλž΅ν•˜λŠ” μ΄μœ λŠ” κ΄„ν˜Έλ₯Ό μ‚¬μš©ν•˜λ©΄ (μ΄λ²€νŠΈκ°€ λ°œμƒν•  λ•Œκ°€ μ•„λ‹ˆλΌ) μ΄λ²€νŠΈκ°€ 바인딩 될 λ•Œ ν•¨μˆ˜λ₯Ό ν˜ΈμΆœν•˜λΌλŠ” μ˜λ―Έκ°€ 되기 λ•Œλ¬Έμž…λ‹ˆλ‹€.

#λ§€κ°œλ³€μˆ˜λ₯Ό 가진 이벀트 ν•Έλ“€λŸ¬μ™€ λ¦¬μŠ€λ„ˆ

이벀트 ν•Έλ“€λŸ¬μ— μ§€μ •λœ ν•¨μˆ˜μ— κ΄„ν˜Έκ°€ μžˆλŠ” 경우 ν•΄λ‹Ή ν•¨μˆ˜λŠ” 바인딩 λ˜λŠ” μˆœκ°„ μ¦‰μ‹œ μ‹€ν–‰λ©λ‹ˆλ‹€. 즉 ν•¨μˆ˜κ°€ 이벀트λ₯Ό 기닀리지 μ•Šκ³  λ°”λ‘œ μ‹€ν–‰λ˜μ–΄, μ›μΉ˜ μ•ŠλŠ” λ™μž‘μ„ μΌμœΌν‚΅λ‹ˆλ‹€. κ·Έλž˜μ„œ λ§€κ°œλ³€μˆ˜λ₯Ό μ „λ‹¬ν•˜κ³  μ‹Άλ‹€λ©΄ μ•„λž˜μ™€ 같은 ν˜•νƒœμ˜Β μ΅λͺ… ν•¨μˆ˜(anonymous function)Β (opens new window)λ₯Ό μ΄μš©ν•΄μ•Ό ν•©λ‹ˆλ‹€.
$stationAddButton.addEventListener('blur', function() { // 읡λͺ…ν•¨μˆ˜λŠ” 두 번째 λ§€κ°œλ³€μˆ˜μ²˜λŸΌ λ™μž‘ν•˜λ©°, 이름을 가진 ν•¨μˆ˜λ₯Ό λ‘˜λŸ¬ μ‹Όλ‹€. onAddStationHandler(name); })
JavaScript
읡λͺ… ν•¨μˆ˜λŠ” κ΄„ν˜Έλ₯Ό 가지고 μžˆκΈ°λŠ” ν•˜μ§€λ§Œ μ΄λ²€νŠΈκ°€ λ°œμƒν–ˆμ„ λ•Œλ§Œ μ‹€ν–‰λ©λ‹ˆλ‹€. 이름을 가진 ν•¨μˆ˜λŠ” 읡λͺ… ν•¨μˆ˜κ°€ 호좜될 λ•Œλ§Œ μ‹€ν–‰λ˜λ©°, λ§€κ°œλ³€μˆ˜λ₯Ό μ‚¬μš©ν•  수 있게 λ©λ‹ˆλ‹€.

3. 이벀트의 흐름과 μ œμ–΄

λŒ€λΆ€λΆ„μ˜ HTML μš”μ†ŒλŠ” λ‹€λ₯Έ μš”μ†Œμ˜ 내뢀에 μ€‘μ²©λ©λ‹ˆλ‹€. κ·Έλž˜μ„œ λ²„νŠΌμ— 마우슀λ₯Ό κ°€μ Έκ°€κ±°λ‚˜ ν΄λ¦­ν•˜λ©΄, κ·Έ λΆ€λͺ¨ μš”μ†Œ ν˜Ήμ€ μžμ‹μš”μ†Œ λ˜ν•œ 같이 ν΄λ¦­ν•œ 것과 같은 λ™μž‘μ„ μΌμœΌν‚€λŠ”λ°μš”. 링크λ₯Ό 가지고 μžˆλŠ” λͺ©λ‘μ„ 예둜 λ“€μ–΄λ³΄κ² μŠ΅λ‹ˆλ‹€. 이 링크λ₯Ό ν΄λ¦­ν•˜λ©΄ μžλ°”μŠ€ν¬λ¦½νŠΈλŠ”Β <a>Β μš”μ†Œμ— 이벀트λ₯Ό λ°œμƒμ‹œν‚΄κ³Ό λ™μ‹œμ—Β <a>Β λ₯Ό ν¬ν•¨ν•˜κ³  μžˆλŠ” λ‹€λ₯Έ λͺ¨λ“  μš”μ†Œλ“€μ—λ„ λ™μΌν•œ 이벀트λ₯Ό λ°œμƒμ‹œν‚΅λ‹ˆλ‹€. μ΄λ²€νŠΈκ°€ λ°œμƒν•˜λŠ” μˆœμ„œλ₯Ό 이벀트 흐름(event flow)이라고 ν•˜λ©°, μ΄λ²€νŠΈκ°€ 흐λ₯΄λŠ” 방식은 λ‹€μŒμ˜ 두 가지가 μžˆμŠ΅λ‹ˆλ‹€.
이벀트 버블링: μ΄λ²€νŠΈκ°€ μ‚¬μš©μžμ˜ λ™μž‘μ— μ§μ ‘μ μœΌλ‘œ 영ν–₯을 받은 λ…Έλ“œλ‘œλΆ€ν„° λ°”κΉ₯μͺ½μœΌλ‘œ μ „νŒŒλ˜μ–΄ λ‚˜κ°€λŠ” 방식.Β  이벀트 캑쳐링: μ΄λ²€νŠΈκ°€ κ°€μž₯ λ°”κΉ₯μͺ½μ˜ λ…Έλ“œλ‘œλΆ€ν„° μ‹œμž‘ν•΄μ„œ μ•ˆμͺ½μœΌλ‘œ μ „νŒŒλ˜μ–΄ λ“€μ–΄μ˜€λŠ” 방식
μœ„μ™€ 같은 이벀트의 νλ¦„μœΌλ‘œ 인해 λ‚΄κ°€ μ›ν•˜λŠ” λ™μž‘μ΄μ™Έμ—λ„ μ΄λ²€νŠΈκ°€ νΌμ Έλ‚˜κ°€μ„œ μ˜ˆμƒμΉ˜ λͺ»ν•œ 였λ₯˜κ°€ λ°œμƒν•˜λŠ” κ²½μš°κ°€ μžˆμŠ΅λ‹ˆλ‹€. 이 λ•Œ 이벀트 객체가 μ œκ³΅ν•΄μ£ΌλŠ” λ©”μ„œλ“œλ₯Ό μ΄μš©ν•˜λ©΄ 문제λ₯Ό 미리 μ˜ˆλ°©ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

Event 객체

Event κ°μ²΄λŠ” μ΄λ²€νŠΈκ°€ λ°œμƒν–ˆμ„ λ•ŒΒ μ΄λ²€νŠΈλ₯Ό λ°œμƒμ‹œν‚¨ μš”μ†Œμ™€Β λ°œμƒν•œ μ΄λ²€νŠΈμ— λŒ€ν•œ 정보λ₯Ό μ œκ³΅ν•©λ‹ˆλ‹€. Event 객체가 μ œκ³΅ν•˜λŠ” μ •λ³΄λŠ” λ‹€μŒκ³Ό κ°™μŠ΅λ‹ˆλ‹€.
β€’
이벀트λ₯Ό λ°œμƒμ‹œν‚¨ μš”μ†Œ
β€’
keypress μ΄λ²€νŠΈκ°€ μ–΄λ–€ 킀에 μ˜ν•΄ λ°œμƒν–ˆλŠ”μ§€μ—λŒ€ν•œ 정보
β€’
μ‚¬μš©μžκ°€ μ–΄λ–€ μš”μ†Œλ₯Ό ν΄λ¦­ν•΄μ„œ click μ΄λ²€νŠΈκ°€ λ°œμƒν–ˆλŠ”μ§€μ— λŒ€ν•œ 정보
이벀트 κ°μ²΄λŠ” 이벀트 λ¦¬μŠ€λ„ˆλ‘œ μ§€μ •λœ ν•¨μˆ˜μ— μžλ™μœΌλ‘œ μ „λ‹¬λ©λ‹ˆλ‹€.
Event 객체
Search
속성
λͺ©μ 
target
Open
μ΄λ²€νŠΈκ°€ λ°œμƒν•œ μš”μ†Œ(μ‚¬μš©μžκ°€ μ˜λ„ν•œ κ°€μž₯ λͺ…ν™•ν•œ μš”μ†Œ)
type
Open
λ°œμƒν•œ 이벀트의 μ’…λ₯˜
Event 객체 λ©”μ„œλ“œ
Search
λ©”μ„œλ“œ
λͺ©μ 
preventDefault()
Open
이벀트의 κΈ°λ³Έ λ™μž‘μ„ μ·¨μ†Œν•œλ‹€.링크λ₯Ό ν΄λ¦­ν•˜κ±°λ‚˜ 폼을 μ œμΆœν•˜λŠ” 것과 같은 λͺ‡ 가지 μ΄λ²€νŠΈλ“€μ€ μ‚¬μš©μžμ—κ²Œ λ‹€λ₯Έ νŽ˜μ΄μ§€λ₯Ό 보여쀀닀.이런 μš”μ†Œλ“€μ˜ κΈ°λ³Έ λ™μž‘μ„ μ€‘λ‹¨ν•˜κΈ° μœ„ν•΄μ„œλŠ”(예λ₯Ό λ“€λ©΄, μ‚¬μš©μžκ°€ 링크λ₯Ό ν΄λ¦­ν•˜κ±°λ‚˜ 폼을 μ œμΆœν•΄λ„ 계속 같은 νŽ˜μ΄μ§€μ— 머무λ₯΄κ²Œ ν•˜λ €λ©΄)event 객체의 preventDefault() λ©”μ„œλ“œλ₯Ό μ‚¬μš©ν•˜λ©΄ λœλ‹€.
stopPropagation()
Open
이벀트의 μΊ‘μ²˜λ§μ΄λ‚˜ 버블링을 μ€‘λ‹¨ν•œλ‹€.μ΄λ²€νŠΈκ°€ λΆ€λͺ¨ μš”μ†Œλ‘œ λ²„λΈ”λ§λ˜λŠ” 것을 (특히 λΆ€λͺ¨ μš”μ†Œκ°€ λ™μΌν•œ μ΄λ²€νŠΈμ— λŒ€ν•΄ κ°œλ³„μ μΈμ΄λ²€νŠΈ ν•Έλ“€λŸ¬λ₯Ό 가지고 μžˆλŠ” 경우라면 λ”λ”μš±) μ€‘λ‹¨ν•˜κ³  싢을 수 μžˆλ‹€.이벀트 버블링을 μ€‘λ‹¨ν•˜λ €λ©΄ event 객체의 stopPropagation() λ©”μ„œλ“œλ₯Ό μ΄μš©ν•œλ‹€.
λΈŒλΌμš°μ €μ˜ μ½˜μ†”μ°½μ„ ν‚€κ³ ,Β eventΒ λ²„νŠΌμ„ ν΄λ¦­ν–ˆμ„ λ•Œμ™€,Β textλ₯Ό μž…λ ₯ν–ˆμ„ λ•Œ μ½˜μ†” 창에 κΈ°λ‘λ˜λŠ” event 객체λ₯Ό ν™•μΈν•΄λ³΄μ„Έμš”.

4. 이벀트 μœ„μž„

이벀트 λ¦¬μŠ€λ„ˆλ₯Ό μ§€μ •ν•˜λŠ” μš”μ†Œκ°€ 많으면 λ§Žμ„μˆ˜λ‘ νŽ˜μ΄μ§€μ˜ μ‹€ν–‰ μ†λ„λŠ” λŠλ €μ§‘λ‹ˆλ‹€. κ·Έλž˜μ„œ 효율적으둜 이벀트λ₯Ό κ΄€λ¦¬ν•˜κΈ° μœ„ν•΄μ„œ 이벀트의 흐름을 μ΄μš©ν•©λ‹ˆλ‹€. μ΄λ²€νŠΈλŠ” μ΄λ²€νŠΈκ°€ λ°œμƒν•œ μ—˜λ¦¬λ¨ΌνŠΈλ₯Ό ν¬ν•¨ν•˜κ³  μžˆλŠ” λΆ€λͺ¨ μš”μ†Œμ—λ„ 영ν–₯을 미치기 λ•Œλ¬Έμ— μžμ‹ μš”μ†Œλ₯Ό 포함할 수 μžˆλŠ” μš”μ†Œμ— 이벀트 ν•Έλ“€λŸ¬λ₯Ό μ§€μ •ν•˜κ³  이벀트의 흐름을 μ΄μš©ν•΄ λ‹€λ£° 수 μžˆμŠ΅λ‹ˆλ‹€. 즉, 이벀트 λ¦¬μŠ€λ„ˆκ°€ μ‹€ν–‰ν•  μž‘μ—…μ„ μš”μ†Œμ˜ λΆ€λͺ¨ μš”μ†Œμ—κ²ŒΒ μœ„μž„(Delegation)ν•  수 μžˆλ‹€λŠ” κ²ƒμž…λ‹ˆλ‹€.

이벀트 μœ„μž„μ˜ μž₯점듀

β€’
λ™μ μœΌλ‘œ μΆ”κ°€λ˜λŠ” μš”μ†Œλ“€μ—λ„ λ™μž‘ν•œλ‹€.
β€’
DOMνŠΈλ¦¬μ— μƒˆλ‘œμš΄ μš”μ†Œλ₯Ό μΆ”κ°€ν•˜λ”λΌλ„ μ΄λ²€νŠΈμ— λŒ€ν•œ μ²˜λ¦¬λŠ” λΆ€λͺ¨ μš”μ†Œμ—κ²Œ μœ„μž„λ˜μ—ˆκΈ° λ•Œλ¬Έμ— μƒˆλ‘œμš΄ μš”μ†Œμ— 이벀트 ν•Έλ“€λŸ¬λ₯Ό λ‹€μ‹œ 지정할 ν•„μš”κ°€ μ—†λ‹€.
β€’
μ½”λ“œμ˜ κ°„κ²°
β€’
이 기법을 μ΄μš©ν•˜λ©΄ ν•¨μˆ˜λ₯Ό 많이 μž‘μ„±ν•  ν•„μš”κ°€ μ—†μœΌλ©° DOMκ³Ό μ½”λ“œκ°„μ˜ 연결이 κ°„μ†Œν•΄μ Έ 결과적으둜 μœ μ§€λ³΄μˆ˜μ— 도움이 λœλ‹€.
<ul id="parent-list"> <li id="item1">Item 1</li> <li id="item2">Item 2</li> <li id="item3">Item 3</li> </ul>
JavaScript
//μƒμœ„ λ…Έλ“œμ— 이벀트 μ„€μ • document.getElementById("parent-list").addEventListener("click", function (e) { if (e.target && e.target.nodeName == "LI") { console.log(`List item ${e.target.id} was clicked!`); } });
JavaScript

πŸ“˜ 정리

β€’
μ΄λ²€νŠΈλŠ” λΈŒλΌμš°μ €κ°€(λ²„νŠΌμ˜ 클릭 λ“±) μ–΄λ–€ 일이 λ°œμƒν–ˆμŒμ„ μ•Œλ¦¬λŠ” μˆ˜λ‹¨μ΄λ‹€.
β€’
바인딩은 μ–΄λ–€ μš”μ†Œμ—μ„œ μ΄λ²€νŠΈκ°€ λ°œμƒν–ˆμ„ λ•Œ, μ–΄λ–»κ²Œ μ²˜λ¦¬ν•  것인지λ₯Ό μ •μ˜ν•˜λŠ” 과정이닀.
β€’
μš”μ†Œμ—μ„œ μ΄λ²€νŠΈκ°€ λ°œμƒν•˜λ©΄ μžλ°”μŠ€ν¬λ¦½νŠΈ ν•¨μˆ˜κ°€ ν˜ΈμΆœλœλ‹€. 이 ν•¨μˆ˜κ°€ μ›Ή νŽ˜μ΄μ§€μ— λ³€ν™”λ₯Ό μ€˜μ„œ, μ‚¬μš©μžμ˜ 행동에 λ°˜μ‘μ„ λ³΄μž„μœΌλ‘œμ¨ μΈν„°λž™ν‹°λΈŒν•œ κ²½ν—˜μ„ λ§Œλ“ λ‹€.
β€’
이벀트 μ „νŒŒλ₯Ό μ΄μš©ν•˜μ—¬ νŠΉμ • μš”μ†Œμ˜ λͺ¨λ“  μžμ‹ μš”μ†Œμ—μ„œ λ°œμƒν•œ 이벀트λ₯Ό λͺ¨λ‹ˆν„°λ§ ν•  수 μžˆλ‹€.
β€’
이벀트 μœ„μž„μ„ μ΄μš©ν•˜λ©΄ λ™μ μœΌλ‘œ μΆ”κ°€λ˜λŠ” μš”μ†Œμ—λ„ μžλ™μ μœΌλ‘œ μ΄λ²€νŠΈκ°€ 바인딩 λ˜λ„λ‘ ν•  수 μžˆλ‹€.

πŸ”— μ°Έκ³  링크