์น ๊ฐ๋ฐ์์ ์ด๋ฒคํธ(Event)๋ ์ฌ์ฉ์๋ ๋ธ๋ผ์ฐ์ ์์ ๋ฐ์ํ๋ ๋์์ ์๋ฏธํฉ๋๋ค. ํด๋ฆญ, ํค๋ณด๋ ์ ๋ ฅ, ํ์ด์ง ๋ก๋ ๋ฑ๊ณผ ๊ฐ์ ๋ชจ๋ ์ํธ์์ฉ์ ์ด๋ฒคํธ๋ก ์ทจ๊ธ๋๋ฉฐ, ์ด๋ฅผ ์ฒ๋ฆฌํ๋ ๊ฒ์ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ๋์ ์ผ๋ก ๋ง๋ค๊ธฐ ์ํ ํต์ฌ ์์์ ๋๋ค. ์ด ๊ธ์์๋ JavaScript์์ ์ด๋ฒคํธ๋ฅผ ์ฒ๋ฆฌํ๋ ๋ฐฉ๋ฒ๊ณผ ํ์ฉ๋ฒ์ ์ดํด๋ณด๊ฒ ์ต๋๋ค.
JavaScript ์ด๋ฒคํธ๋?
JavaScript ์ด๋ฒคํธ๋ ์ฌ์ฉ์์ ์น ํ์ด์ง ๊ฐ์ ์ํธ์์ฉ์ ๊ธฐ๋ฐ์ผ๋ก ๋ฐ์ํฉ๋๋ค. ์ฌ์ฉ์๊ฐ ๋ฒํผ์ ํด๋ฆญํ๊ฑฐ๋ ํค๋ณด๋๋ฅผ ๋๋ฅผ ๋, ๋๋ ์น ํ์ด์ง๊ฐ ๋ก๋๋ ๋์ ๊ฐ์ ์ํฉ์ด ์ด๋ฒคํธ์ ํด๋นํฉ๋๋ค. JavaScript๋ ์ด๋ฌํ ์ด๋ฒคํธ๋ฅผ ๊ฐ์งํ๊ณ ์ฒ๋ฆฌํ ์ ์๋ ๋ฉ์๋์ ๊ธฐ๋ฅ์ ์ ๊ณตํฉ๋๋ค.
์์ฃผ ์ฌ์ฉ๋๋ ์ด๋ฒคํธ ์ข ๋ฅ
- click: ์ฌ์ฉ์๊ฐ ์์๋ฅผ ํด๋ฆญํ ๋ ๋ฐ์
- keydown: ์ฌ์ฉ์๊ฐ ํค๋ณด๋๋ฅผ ๋๋ ์ ๋ ๋ฐ์
- mouseover: ์ฌ์ฉ์๊ฐ ์์ ์์ ๋ง์ฐ์ค๋ฅผ ์ฌ๋ฆด ๋ ๋ฐ์
- submit: ํผ์ ์ ์ถํ ๋ ๋ฐ์
- load: ํ์ด์ง๋ ์์๊ฐ ์์ ํ ๋ก๋๋์์ ๋ ๋ฐ์
์ด๋ฒคํธ ์ฒ๋ฆฌ ๋ฐฉ๋ฒ
JavaScript์์๋ ์ด๋ฒคํธ๋ฅผ ์ฒ๋ฆฌํ๊ธฐ ์ํ ์ฌ๋ฌ ๊ฐ์ง ๋ฐฉ๋ฒ์ด ์์ต๋๋ค. ๊ฐ์ฅ ์ผ๋ฐ์ ์ผ๋ก ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ์ addEventListener
๋ฉ์๋๋ฅผ ํ์ฉํ๋ ๊ฒ์
๋๋ค. ์ด๋ฅผ ํตํด ํน์ ์ด๋ฒคํธ๊ฐ ๋ฐ์ํ ๋ ์คํ๋ ํจ์๋ฅผ ์ง์ ํ ์ ์์ต๋๋ค.
์ด๋ฒคํธ ๋ฆฌ์ค๋ ์ถ๊ฐํ๊ธฐ
addEventListener
๋ฉ์๋๋ ํน์ ์์์ ์ด๋ฒคํธ๋ฅผ ๋ฑ๋กํ์ฌ, ์ด๋ฒคํธ๊ฐ ๋ฐ์ํ ๋๋ง๋ค ์ง์ ๋ ํจ์๋ฅผ ์คํํฉ๋๋ค. ๊ธฐ๋ณธ ๋ฌธ๋ฒ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค:
element.addEventListener(event, function, useCapture);
- element: ์ด๋ฒคํธ๋ฅผ ๋ฑ๋กํ HTML ์์
- event: ์ฒ๋ฆฌํ ์ด๋ฒคํธ ์ ํ (์:
click
,mouseover
๋ฑ) - function: ์ด๋ฒคํธ ๋ฐ์ ์ ์คํํ ํจ์
- useCapture: ์บก์ฒ๋ง ์ฌ๋ถ (์ ํ ์ฌํญ)
ํด๋ฆญ ์ด๋ฒคํธ ์์
์๋๋ ๋ฒํผ์ ํด๋ฆญํ์ ๋ ์ด๋ฒคํธ๋ฅผ ์ฒ๋ฆฌํ๋ ๊ฐ๋จํ ์์ ์ ๋๋ค:
let button = document.querySelector("button");
button.addEventListener("click", function() {
alert("๋ฒํผ์ด ํด๋ฆญ๋์์ต๋๋ค!");
});
์ ์ฝ๋์์ addEventListener
๋ click
์ด๋ฒคํธ๋ฅผ ๊ฐ์งํ๊ณ , ์ฌ์ฉ์๊ฐ ๋ฒํผ์ ํด๋ฆญํ ๋๋ง๋ค ์๋ฆผ ๋ฉ์์ง๋ฅผ ์ถ๋ ฅํฉ๋๋ค.
๋ค์ํ ์ด๋ฒคํธ ์ฒ๋ฆฌ
JavaScript๋ ๋ค์ํ ์ด๋ฒคํธ๋ฅผ ์ฒ๋ฆฌํ ์ ์์ต๋๋ค. ๋ช ๊ฐ์ง ๋ํ์ ์ธ ์ด๋ฒคํธ๋ฅผ ์๋ก ๋ค์ด๋ณด๊ฒ ์ต๋๋ค.
ํค๋ณด๋ ์ด๋ฒคํธ (keydown, keyup)
ํค๋ณด๋ ์ด๋ฒคํธ๋ ์ฌ์ฉ์๊ฐ ํค๋ณด๋๋ฅผ ๋๋ฅด๊ฑฐ๋ ๋ ๋ ๋ฐ์ํฉ๋๋ค. keydown
์ด๋ฒคํธ๋ ํค๋ฅผ ๋๋ฅด๋ ์ฆ์ ๋ฐ์ํ๋ฉฐ, keyup
์ด๋ฒคํธ๋ ํค๋ฅผ ๋ ๋ ๋ฐ์ํฉ๋๋ค.
document.addEventListener("keydown", function(event) {
console.log("๋๋ฆฐ ํค: " + event.key);
});
์ ์ฝ๋์์๋ ์ฌ์ฉ์๊ฐ ํค๋ณด๋๋ฅผ ๋๋ฅผ ๋๋ง๋ค ๋๋ฆฐ ํค ๊ฐ์ ์ฝ์์ ์ถ๋ ฅํฉ๋๋ค.
๋ง์ฐ์ค ์ด๋ฒคํธ (mouseover, mouseout)
๋ง์ฐ์ค ์ด๋ฒคํธ๋ ์ฌ์ฉ์๊ฐ ํน์ ์์ ์๋ก ๋ง์ฐ์ค๋ฅผ ์ฌ๋ฆฌ๊ฑฐ๋, ๊ทธ ์์์์ ๋ง์ฐ์ค๋ฅผ ๋ฒ์ด๋ ๋ ๋ฐ์ํฉ๋๋ค.
let div = document.querySelector("div");
div.addEventListener("mouseover", function() {
div.style.backgroundColor = "yellow";
});
div.addEventListener("mouseout", function() {
div.style.backgroundColor = "white";
});
์ ์ฝ๋๋ ์ฌ์ฉ์๊ฐ div
์์์ ๋ง์ฐ์ค๋ฅผ ์ฌ๋ฆฌ๋ฉด ๋ฐฐ๊ฒฝ์์ด ๋
ธ๋์์ผ๋ก ๋ฐ๋๊ณ , ๋ง์ฐ์ค๋ฅผ ๋ฒ์ด๋๋ฉด ๋ค์ ํ์์์ผ๋ก ๋ณ๊ฒฝ๋ฉ๋๋ค.
์ด๋ฒคํธ ๊ฐ์ฒด
์ด๋ฒคํธ๊ฐ ๋ฐ์ํ ๋, JavaScript๋ ์๋์ผ๋ก ์ด๋ฒคํธ ๊ฐ์ฒด(Event Object)๋ฅผ ์์ฑํ์ฌ ํด๋น ์ด๋ฒคํธ์ ๋ํ ์ ๋ณด๋ฅผ ์ ๊ณตํฉ๋๋ค. ์ด๋ฒคํธ ๊ฐ์ฒด๋ ์ด๋ฒคํธ์ ์ธ๋ถ ์ ๋ณด๋ฅผ ๋ด๊ณ ์์ผ๋ฉฐ, ์ด๋ฅผ ํตํด ๋ค์ํ ์์ ์ ์ฒ๋ฆฌํ ์ ์์ต๋๋ค.
์ด๋ฒคํธ ๊ฐ์ฒด ํ์ฉ ์์
document.addEventListener("click", function(event) {
console.log("ํด๋ฆญํ ์์น: X=" + event.clientX + ", Y=" + event.clientY);
});
์ ์ฝ๋์์๋ ํด๋ฆญํ ๋ง์ฐ์ค์ ์ขํ๋ฅผ ์ด๋ฒคํธ ๊ฐ์ฒด๋ฅผ ํตํด ํ์ธํ ์ ์์ต๋๋ค. clientX
์ clientY
๋ ํด๋ฆญํ ์ง์ ์ X, Y ์ขํ๋ฅผ ๋ํ๋
๋๋ค.
์ด๋ฒคํธ ์ ํ (Event Propagation)
JavaScript ์ด๋ฒคํธ๋ DOM ํธ๋ฆฌ์์ ์์ ์์๋ ํ์ ์์๋ก ์ ํ๋ฉ๋๋ค. ์ด๋ฅผ ์ด๋ฒคํธ ์ ํ๋ผ๊ณ ํ๋ฉฐ, ๋ ๊ฐ์ง ๋ฐฉ์์ผ๋ก ๋๋ฉ๋๋ค:
- ์บก์ฒ๋ง(Capturing): ์์ ์์์์ ํ์ ์์๋ก ์ด๋ฒคํธ๊ฐ ์ ๋ฌ
- ๋ฒ๋ธ๋ง(Bubbling): ํ์ ์์์์ ์์ ์์๋ก ์ด๋ฒคํธ๊ฐ ์ ๋ฌ
์ด๋ฒคํธ ์ ํ ์ฐจ๋จ
์ด๋ฒคํธ๊ฐ ์์ ๋๋ ํ์๋ก ์ ํ๋๋ ๊ฒ์ ์ฐจ๋จํ๋ ค๋ฉด event.stopPropagation()
๋ฉ์๋๋ฅผ ์ฌ์ฉํฉ๋๋ค.
document.querySelector("button").addEventListener("click", function(event) {
event.stopPropagation(); // ์ด๋ฒคํธ ์ ํ ์ฐจ๋จ
alert("๋ฒํผ ํด๋ฆญ ์ด๋ฒคํธ ์ฒ๋ฆฌ");
});
์ ์ฝ๋์์๋ ๋ฒํผ์ ํด๋ฆญํ ๋ ์ด๋ฒคํธ๊ฐ ๋ ์ด์ ์์ ์์๋ก ์ ํ๋์ง ์๋๋ก ์ฐจ๋จํฉ๋๋ค.
์ด๋ฒคํธ ๊ธฐ๋ณธ ๋์ ๋ฐฉ์ง
์ผ๋ถ ์ด๋ฒคํธ๋ ํน์ ๊ธฐ๋ณธ ๋์์ ๊ฐ์ง๊ณ ์์ต๋๋ค. ์๋ฅผ ๋ค์ด, ํผ ์ ์ถ ์ ํ์ด์ง๊ฐ ์๋ก ๊ณ ์นจ๋๊ฑฐ๋, ๋งํฌ๋ฅผ ํด๋ฆญํ๋ฉด ์๋ก์ด ํ์ด์ง๋ก ์ด๋ํ๋ ๊ฒ์ด ๊ทธ ์์
๋๋ค. ์ด๋ฐ ๊ธฐ๋ณธ ๋์์ ๋ฐฉ์งํ๋ ค๋ฉด event.preventDefault()
๋ฉ์๋๋ฅผ ์ฌ์ฉํฉ๋๋ค.
๊ธฐ๋ณธ ๋์ ๋ฐฉ์ง ์์
document.querySelector("a").addEventListener("click", function(event) {
event.preventDefault(); // ๋งํฌ ๊ธฐ๋ณธ ๋์ ๋ฐฉ์ง
alert("๋งํฌ ํด๋ฆญ์ด ๋ฐฉ์ง๋์์ต๋๋ค.");
});
์ ์ฝ๋์์๋ ๋งํฌ๋ฅผ ํด๋ฆญํด๋ ๊ธฐ๋ณธ ๋์์ธ ํ์ด์ง ์ด๋์ด ๋ฐ์ํ์ง ์๊ณ , ๋์ ์๋ฆผ์ฐฝ์ด ์ถ๋ ฅ๋ฉ๋๋ค.
๊ฒฐ๋ก
JavaScript์์ ์ด๋ฒคํธ๋ ์ฌ์ฉ์์ ์น ํ์ด์ง ๊ฐ์ ์ํธ์์ฉ์ ์ฒ๋ฆฌํ๋ ํต์ฌ์ ์ธ ์์์
๋๋ค. addEventListener
๋ฉ์๋๋ฅผ ์ฌ์ฉํ์ฌ ๋ค์ํ ์ด๋ฒคํธ๋ฅผ ์ฒ๋ฆฌํ ์ ์์ผ๋ฉฐ, ์ด๋ฒคํธ ๊ฐ์ฒด๋ฅผ ํ์ฉํด ๋์ฑ ์ธ๋ถ์ ์ธ ๋์์ ์ ์ดํ ์ ์์ต๋๋ค. ๋ํ ์ด๋ฒคํธ ์ ํ์ ๊ธฐ๋ณธ ๋์์ ์ดํดํ๊ณ ์ ์ ํ ํ์ฉํ๋ฉด, ๋์ฑ ๋์ ์ด๊ณ ์ธํฐ๋ํฐ๋ธํ ์น ํ์ด์ง๋ฅผ ๋ง๋ค ์ ์์ต๋๋ค.
์ด์ JavaScript ์ด๋ฒคํธ๋ฅผ ์ฌ์ฉํ์ฌ ์น ํ์ด์ง๋ฅผ ๋์ฑ ํฅ๋ฏธ๋กญ๊ฒ ๋ง๋ค์ด๋ณด์ธ์!
๋๊ธ ์ฐ๊ธฐ