1 분 소요

웹 페이지에서 사용자의 행동(클릭, 입력, 마우스 이동 등) 을 의미합니다.

이벤트가 발생하면 브라우저는 이를 감지하고, 등록된 함수(이벤트 핸들러)를 실행합니다.

예시

  • 버튼을 클릭하면 click 이벤트 발생
  • 텍스트 박스에 입력하면 input 이벤트 발생

이벤트 핸들러란?

이벤트가 발생했을 때 실행되는 함수(콜백) 를 의미합니다.

$(function() {
  $("button").on({
    mouseenter: function() {
      $("#text").append("마우스 진입<br>");
    },
    click: function() {
      $("#text").append("클릭됨<br>");
    },
    mouseleave: function() {
      $("#text").append("마우스 나감<br>");
    }
  });
});

.on() 메소드를 사용하면 여러 이벤트를 동시에 연결할 수 있습니다.

이벤트 객체(event object)

이벤트가 발생하면 이벤트 정보가 담긴 객체가 핸들러 함수로 자동 전달됩니다.

주요 속성과 메소드

  • event.type : 이벤트 타입 (예: “click”)
  • event.target : 이벤트가 발생한 대상 요소
  • event.preventDefault() : 기본 동작 방지 (예: 링크 이동 막기)
  • event.stopPropagation() : 이벤트 전파 중단 (부모로 전달되지 않음)

이벤트 객체 사용 예제

// 1. 이벤트 정보 확인
$("button").on("click", function(event) {
  const info = `타입: ${event.type}, 대상: ${event.target.tagName}`;
  $("#text").html(info);
});

// 2. 링크 기본 동작 막기
$("a").on("click", function(event) {
  event.preventDefault();
  alert("링크 이동이 막혔습니다.");
});

// 3. 이벤트 전파 중단
$("div").on("click", function() {
  alert("DIV 클릭");
});
$("button").on("click", function(event) {
  event.stopPropagation();
  alert("버튼 클릭");
});

제이쿼리 이벤트 처리의 장점

  • 간결한 문법

    .on("click", fn) 형태로 간단하게 작성 가능

  • 다중 이벤트 연결

    하나의 .on()으로 여러 이벤트 처리 가능

  • 브라우저 호환성 우수

    이벤트 객체가 표준화되어 있어 크로스 브라우징 걱정 없음

핵심 메소드 요약

  • .on() : 이벤트 핸들러 등록
  • .off() : 등록된 핸들러 제거
  • .trigger() : 이벤트 강제 실행
  • preventDefault() : 기본 동작 방지
  • stopPropagation() : 이벤트 전파 중단

실용 예제

1. 폼 제출 방지 및 검증

$("#form").on("submit", function(event) {
  const input = $("#username").val();
  if (!input) {
    event.preventDefault();
    alert("이름을 입력해주세요.");
  }
});

2. 버튼 클릭에 따른 클래스 토글

$("button").on("click", function() {
  const isActive = $(this).hasClass("active");
  $(this).toggleClass("active");
  $("#text").html(isActive ? "비활성화됨" : "활성화됨");
});

이벤트 처리 팁

  • 동적 요소에는 이벤트 위임 사용하기

    .on("click", "selector", fn) 형식으로 부모 요소에 연결하면, 나중에 추가된 요소도 대응 가능합니다.

  • 불필요한 이벤트는 제거하기

    .off()를 사용해 더 이상 필요 없는 이벤트를 제거하면 성능 향상에 도움이 됩니다.

  • 기본 동작 제어는 항상 명시적으로

    preventDefault() 호출 여부를 코드로 명확하게 표현해 예측 가능한 동작을 유지하세요.

질문 정리

이벤트를 두 번 이상 연결하면 중복 실행되나요?

네, 같은 요소에 같은 이벤트가 여러 번 연결되면 여러 번 실행됩니다. 중복을 방지하려면 .off()를 먼저 호출하거나 .one()을 사용하세요.

동적으로 생성된 요소는 왜 이벤트가 안 걸리나요?

.on()으로 이벤트를 등록할 때, 부모 요소를 기준으로 이벤트 위임 방식을 사용해야 동적 요소도 처리됩니다.

기존 이벤트를 모두 제거하려면?

.off() 메소드에 아무 인자도 전달하지 않으면 해당 요소의 모든 이벤트가 제거됩니다.

submit 이벤트도 취소할 수 있나요?

네, event.preventDefault()를 사용하면 폼 전송을 막을 수 있습니다.

카테고리:

업데이트:

댓글남기기

참고