๐ป 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
ํ๋ก๊ทธ๋๋จธ์ค ๋ฐ๋ธ์ฝ์ค
๋ฒ๋ธ๋ง๊ณผ ์บก์ฒ๋ง
์ด๋ฒคํธ ์์
์ค๋์ ๋ด์ฉ ์ ๋ฆฌ
Author And Source
์ด ๋ฌธ์ ์ ๊ดํ์ฌ(๐ป TIL 16 | ์ด๋ฒคํธ ๋ฒ๋ธ๋ง๊ณผ ์ด๋ฒคํธ ์์), ์ฐ๋ฆฌ๋ ์ด๊ณณ์์ ๋ ๋ง์ ์๋ฃ๋ฅผ ๋ฐ๊ฒฌํ๊ณ ๋งํฌ๋ฅผ ํด๋ฆญํ์ฌ ๋ณด์๋ค https://velog.io/@hsk10271/TIL-16์ ์ ๊ท์: ์์์ ์ ๋ณด๊ฐ ์์์ URL์ ํฌํจ๋์ด ์์ผ๋ฉฐ ์ ์๊ถ์ ์์์ ์์ ์ ๋๋ค.
์ฐ์ํ ๊ฐ๋ฐ์ ์ฝํ ์ธ ๋ฐ๊ฒฌ์ ์ ๋ (Collection and Share based on the CC Protocol.)
์ข์ ์นํ์ด์ง ์ฆ๊ฒจ์ฐพ๊ธฐ
๊ฐ๋ฐ์ ์ฐ์ ์ฌ์ดํธ ์์ง
๊ฐ๋ฐ์๊ฐ ์์์ผ ํ ํ์ ์ฌ์ดํธ 100์ ์ถ์ฒ ์ฐ๋ฆฌ๋ ๋น์ ์ ์ํด 100๊ฐ์ ์์ฃผ ์ฌ์ฉํ๋ ๊ฐ๋ฐ์ ํ์ต ์ฌ์ดํธ๋ฅผ ์ ๋ฆฌํ์ต๋๋ค