์น ํ์ด์ง๋ ์ฌ์ฉ์์์ ์ํธ์์ฉ์ ๊ธฐ๋ฐ์ผ๋ก ๋์ํ๋ค.
ํด๋ฆญ, ์ ๋ ฅ, ๋ง์ฐ์ค ์ด๋ ๋ฑ ์ด๋ฌํ ๋์์ ์ด๋ฒคํธ(Event)๋ผ๊ณ ํ๋ค.
jQuery๋ ์ด๋ฒคํธ ์ฒ๋ฆฌ๋ฅผ ๊ฐ๊ฒฐํ๊ฒ ์์ฑํ ์ ์๋๋ก ๋์์ค๋ค.
1. ์ด๋ฒคํธ ๋ฑ๋ก ๋ฉ์๋
1) ์ด๋ฒคํธ ๋ฑ๋ก ๋ฉ์๋๋?
ํน์ ์์์ ์ด๋ฒคํธ๊ฐ ๋ฐ์ํ์ ๋ ์คํํ ํจ์๋ฅผ ์ฐ๊ฒฐํ๋ ๊ฒ
๊ธฐ๋ณธ ๊ตฌ์กฐ
$("์ ํ์").์ด๋ฒคํธ๋ช
(function() {
์คํ์ฝ๋;
});
2) ์ด๋ฒคํธ ๋ฑ๋ก ๋ฐฉ์
โ ์ง์ ๋ฑ๋ก ๋ฐฉ์
$("#btn").click(function() {
alert("ํด๋ฆญ๋จ");
});
โก on() ๋ฉ์๋ ๋ฐฉ์(๊ถ์ฅ)
$("#btn").on("click", function() {
alert("ํด๋ฆญ๋จ");
});
on()์
- ๋์ ์์ ๋์ ๊ฐ๋ฅ
- ์ฌ๋ฌ ์ด๋ฒคํธ ๋ฑ๋ก ๊ฐ๋ฅ
3) ๋ง์ฐ์ค ์ด๋ฒคํธ
| ์ด๋ฒคํธ | ์ค๋ช |
| click | ํด๋ฆญ |
| dbclick | ๋๋ธ ํด๋ฆญ |
| mouseenter | ๋ง์ฐ์ค ์ง์ |
| mouseleave | ๋ง์ฐ์ค ๋ฒ์ด๋จ |
| hover | ์ง์ + ๋ฒ์ด๋จ |
| mousedown | ๋๋ฆ |
| mouseup | ๋ |
ex.
$(".box").mouseenter(function() {
$(this).css("background", "red");
});
4) ์ด๋ฒคํธ ๊ฐ์ฒด์ ์ข ๋ฅ
์ด๋ฒคํธ๊ฐ ๋ฐ์ํ๋ฉด ์ด๋ฒคํธ ๊ฐ์ฒด(Event Object)๊ฐ ์์ฑ๋๋ค.
$("#btn").click(function(e) {
console.log(e.type);
});
์ฃผ์ ์์ฑ
| ์์ฑ | ์ค๋ช |
| e.type | ์ด๋ฒคํธ ์ข ๋ฅ |
| e.target | ์ค์ ๋ฐ์ ์์ |
| e.pageX / pageY | ๋ง์ฐ์ค ์ขํ |
| e.preventDefault() | ๊ธฐ๋ณธ ๋์ ๋ฐฉ์ง |
| e.stopPropagation() | ์ด๋ฒคํธ ์ ํ ์ฐจ๋จ |
5) ํฌ์ปค์ค ์ด๋ฒคํธ
์ ๋ ฅ ์์์ ์ฌ์ฉํ๋ค.
| ์ด๋ฒคํธ | ์ค๋ช |
| focus | ํฌ์ปค์ค ์ง์ |
| blur | ํฌ์ปค์ค ๋ฒ์ด๋จ |
| focusin | ๋ด๋ถ ํฌํจ |
| focusout | ๋ด๋ถ ํฌํจ ๋ฒ์ด๋จ |
$("input").focus(function() {
$(this).css("border", "2px solid blue");
});
6) ํค๋ณด๋๋ก ๋ง์ฐ์ค ์ด๋ฒคํธ ๋์ํ๊ธฐ
ํค ์ ๋ ฅ์ ํตํด ํด๋ฆญ๊ณผ ๊ฐ์ ํจ๊ณผ๋ฅผ ๊ตฌํํ๋ค.
$(document).keydown(function(e) {
if (e.key === "Enter") {
$("#btn").click();
}
});
7) ํค๋ณด๋ ์ด๋ฒคํธ
| ์ด๋ฒคํธ | ์ค๋ช |
| keydown | ํค ๋๋ฆ |
| keyup | ํค ๋ |
| keypress | ๋ฌธ์ ์ ๋ ฅ |
$("input").keyup(function() {
console.log($(this).val());
});
8) ์ด๋ฒคํธ๊ฐ ๋ฐ์ํ ์์ ์ถ์ ํ๊ธฐ
this ๋๋ e.target ์ฌ์ฉ
$("li").click(function() {
console.log($(this).text());
});
this๋ ์ด๋ฒคํธ๊ฐ ๋ฐ์ํ ์์๋ฅผ ๊ฐ๋ฆฌํจ๋ค.
2. ๊ทธ๋ฃน ์ด๋ฒคํธ ๋ฑ๋ก ๋ฐ ์ญ์
1) ๊ทธ๋ฃน ์ด๋ฒคํธ ๋ฑ๋ก ๋ฉ์๋
์ฌ๋ฌ ์ด๋ฒคํธ๋ฅผ ๋์์ ๋ฑ๋ก
$("#btn").on("mouseenter mouseleave", function() {
$(this).toggleClass("active");
});
๋๋ ๊ฐ์ฒด ํํ
$("#btn").on({
mouseenter: function() {
$(this).css("color", "red");
},
mouseleave: function() {
$(this).css("color", "black");
}
});
2) ์ด๋ฒคํธ ์ ๊ฑฐ ๋ฉ์๋
off()
$("#btn").off("click");
ํน์ ์ด๋ฒคํธ ์ ๊ฑฐ
one()
ํ ๋ฒ๋ง ์คํ๋๋ค.
$("#btn").one("click", function() {
alert("ํ ๋ฒ๋ง ์คํ");
});'Front-End > JavaScript | jQuery | AJAX' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| 09. ์ ์ด์ฟผ๋ฆฌ(jQuery) ๋น๋๊ธฐ ๋ฐฉ์ ์ฐ๋ (0) | 2026.02.17 |
|---|---|
| 08. ๋ค์ํ ํจ๊ณผ์ ์ ๋๋ฉ์ด์ (0) | 2026.02.17 |
| 06. ์ ์ด์ฟผ๋ฆฌ(jQuery) ๋ฌธ์ ๊ฐ์ฒด ์ ํ์์ ์กฐ์๋ฒ (0) | 2026.02.17 |
| 05. ํจ์(Function) (0) | 2026.02.16 |
| 04. ๊ฐ์ฒด(Object) (0) | 2026.02.16 |