제이쿼리 이벤트 처리
웹 요소에서 발생하는 사용자 동작(클릭, 입력 등)에 반응할 수 있도록 핸들러 함수를 연결하는 것을 말합니다.
제이쿼리에서는 다양한 방식으로 이벤트를 연결할 수 있지만, 현재는 .on() 메소드가 표준 방식으로 권장됩니다.
.on() 메소드 – 핵심 이벤트 연결 메소드
특징
- 클릭, 마우스, 입력 등 다양한 이벤트 연결 가능
- 여러 이벤트를 동시에 등록 가능
- 이벤트 위임으로 동적 요소에도 적용 가능
예제
// 기본 연결
$("button").on("click", function() {
$("#text").html("버튼을 클릭했어요!");
});
// 다중 이벤트 연결
$("button").on("mouseenter mouseleave", function() {
$("#text").append("마우스 진입/이탈<br>");
});
// 이벤트 위임 (동적 요소 포함)
$("body").on("click", "#dynamicButton", function() {
alert("동적으로 생성된 버튼을 클릭!");
});
.one() 메소드 – 한 번만 실행되는 핸들러
특징
- 첫 번째 이벤트 발생 시 한 번만 실행됨
- 이후 같은 이벤트에는 반응하지 않음
예제
$("button").one("click", function() {
$("#text").append("첫 클릭입니다!<br>");
});
.off() 메소드 – 이벤트 제거
특징
.on()으로 등록한 이벤트를 해제할 수 있음- 특정 이벤트 또는 모든 이벤트 제거 가능
예제
$("#clickBtn").on("click", function() {
$("#text").append("클릭됨<br>");
});
$("#removeBtn").on("click", function() {
$("#clickBtn").off("click"); // 클릭 이벤트 제거
});
.trigger() 메소드 – 강제로 이벤트 실행
예제
$("button").on("click", function() {
$("#text").append("실제 클릭됨<br>");
});
// 강제로 클릭 이벤트 실행
$("button").trigger("click");
사용자 지정 이벤트 처리
$("button").on("myCustomEvent", function(event, data) {
alert("사용자 이벤트 발생: " + data.message);
});
// 사용자 이벤트 트리거
$("button").trigger("myCustomEvent", { message: "안녕하세요!" });
과거 방식 (사용 비권장)
.bind(): 단일 이벤트 연결 (→.on()으로 대체).live()/.delegate(): 동적 요소 지원용 (→.on()으로 대체)
실용 예제
동적 요소 추가 및 이벤트 처리
$("#addBtn").on("click", function() {
const newBtn = $("<button id='dynamicButton'>동적 버튼</button>");
$("body").append(newBtn);
});
$("body").on("click", "#dynamicButton", function() {
alert("동적으로 추가된 버튼 클릭!");
});
클릭 시 클래스 토글
$("button").on("click", function() {
$(this).toggleClass("active");
const isActive = $(this).hasClass("active");
$("#text").html(isActive ? "활성화됨" : "비활성화됨");
});
이벤트 처리 팁
-
이벤트 위임을 적극 활용하세요
동적으로 생성되는 요소에도
.on()으로 연결하면 이벤트가 잘 작동합니다. -
불필요한 이벤트는 .off()로 제거
이벤트가 중복 실행되거나 메모리 누수를 방지할 수 있습니다.
-
이벤트 기본 동작과 전파 제어하기
event.preventDefault()→ 링크 이동 막기event.stopPropagation()→ 부모 이벤트 실행 방지
질문 정리
이벤트를 한 번만 실행되게 할 수 있나요?
→ .one() 메소드를 사용하세요. 이벤트가 한 번 실행된 후 자동으로 제거됩니다.
동적 버튼에 이벤트가 안 걸리는 이유는?
→ 요소가 나중에 생성되었기 때문에 직접 연결된 이벤트는 작동하지 않습니다. .on()으로 부모에 위임하세요.
기존에 연결된 이벤트를 제거하려면?
→ .off()를 사용하세요. 특정 이벤트만 제거할 수도 있고, 모든 이벤트를 제거할 수도 있습니다.
이벤트가 실행되지 않는 경우는 왜인가요?
→ 선택자가 잘못됐거나, 요소가 아직 DOM에 없을 수 있습니다. 또는 이벤트가 중복되어 충돌할 수도 있습니다.
댓글남기기