๐Ÿ’ป TIL 16 | ์ด๋ฒคํŠธ ๋ฒ„๋ธ”๋ง๊ณผ ์ด๋ฒคํŠธ ์œ„์ž„

์ด๋ฒˆ ์ฑ•ํ„ฐ๋Š” ์ด๋ฒคํŠธ ๋ฒ„๋ธ”๋ง๊ณผ ์ด๋ฒคํŠธ ์œ„์ž„์— ๋Œ€ํ•ด์„œ ๋‹ค๋ฃจ์—ˆ์Šต๋‹ˆ๋‹ค.~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

์ข‹์€ ์›นํŽ˜์ด์ง€ ์ฆ๊ฒจ์ฐพ๊ธฐ