/
/

jQuery 이벤트

avatar
전상욱
2025.04.10
·
7 min read

1. 이벤트 등록 메서드

1-1 이벤트 등록 메서드란?

이벤트

사이트에서 방문자가 취하는 모든 행위

이벤트 헨들러

이벤트가 발생했을 때 실행되는 코드

2. 단독 이벤트 등록 및 삭제 메서드, 이벤트 종류

단독 이벤트 등록 메서드란?

대상에 한 가지 동작에 대한 이벤트만 등록함.

기본형

$("이벤트 대상 선택").이벤트등록메서드(function(){
    자바스크립트 코드;
});

  • 이벤트 제거 메서드
    off() 메서드를 이용하여 해당 이벤트를 제거함.

    기본형

    $("이벤트 대상").off("제거할 이벤트 종류");

  • 강제로 이벤트 발생
    이벤트 핸들러에 의해 자동으로 이벤트가 발생함.

    기본형

    $("이벤트 대상").단독 이벤트 등록 메서드();
$("이벤트 대상").trigger("이벤트 종류");

2-1. 로딩 이벤트 메서드

  • ready() 이벤트 메서드
    사용자가 사이트를 방문할 때 요청한 HTML 문서 객체(document의 로딩이 끝나면 이벤트를 발생함.

    기본형

    $(document).load(function(){자바스크립트 코드;});
$(document).on("load",function(){자바스크립트 코드;});

  • load() 이벤트 메서드
    외부에 연동된 소스의 로딩이 끝나면 이벤트를 발생합니다.

    기본형

    $(document).load(function(){자바스크립트 코드;});
$(document).on("load",function(){자바스크립트 코드;});

  • ready()와 load() 실행위치

    1. 웹브라우저 시작

    2. 웹문서 읽기

    3. 문서 객체 모델(DOM) 생성 -> ready() 이벤트 메서드 실행

    4. 이미지 등의 요소들이 로드되기 시작

    5. 페이지 로딩 완료 -> load() 이벤트 메서드 실행

2-2. 마우스 이벤트

  • click() 이벤트 메서드
    선택한 요소를 클릭했을 때 이벤트를 발생시키거나 선택한 요소에 강제로 클릭 이벤트를 발생시킬때 사용함.

    기본형

    $("이벤트 대상 선택").click(function(){자바스크립트 코드;});
$("이벤트 대상 선택").on("click",function(){자바스크립트 코드;});
$("이벤트 대상 선택").click(); // click이벤트 강제 발생

  • dblclick() 이벤트 메서드
    선택한 요소를 클릭했을 때 이벤트를 발생시키거나 선택한 요소에 강제로 클릭 이벤트를 발생시킬 때 사용함.

    기본형

    $("이벤트 대상 선택").dblclick(function(){자바스크립트 코드;});
$("이벤트 대상 선택").on("dblclick",function(){자바스크립트 코드;});
$("이벤트 대상 선택").dblclick(); // dblclick이벤트 강제 발생

  • mouseover() 이벤트 메서드
    선택한 요소에 마우스 포인터를 올릴 때마다 이벤트를 발생시키거나 선택한 요소에 mouseover 이벤트를 강제로 발생 시킴.

    기본형

    $("이벤트 대상 선택").mouseover(function(){자바스크립트 코드;});
$("이벤트 대상 선택").on("mouseover",function(){자바스크립트 코드;});
$("이벤트 대상 선택").mouseover(); // mouseover이벤트 강제 발생

  • mouseout() 이벤트 메서드
    선택한 요소에서 마우스 포인터가 벗어날 때마다 이벤트를 발생시키거나 선택한 요소에 mouseout 이벤트를 강제로 발생 시킴.

    기본형

    $("이벤트 대상 선택").mouseout(function(){자바스크립트 코드;});
$("이벤트 대상 선택").on("mouseout",function(){자바스크립트 코드;});
$("이벤트 대상 선택").mouseout(); // mouseout이벤트 강제 발생

  • hover() 이벤트 메서드
    선택한 요소에 마우스 포인터가 올라갈때와 선택한 요소에서 벗어날 때 각각 이벤트를 발생시키며, 각각 다른 이벤트 핸들러를 실행시킴.

    기본형

    $("이벤트 대상 선택").hover(
  function(){마우스 오버 시 실행될 코드;},
  function(){마우스 아웃 시 실행될 코드;}
 );

  • mouseenter() 이벤트 메서드
    대상 요소의 경계 범위에 마우스 포인터가 들어오면 이벤트를 발생시킴.

    기본형

    $("이벤트 대상 선택").mouseenter(function(){자바스크립트 코드;});
$("이벤트 대상 선택").on("mouseenter",function(){자바스크립트 코드;});
$("이벤트 대상 선택").mouseenter(); // mouseenter이벤트 강제 발생

  • mouseleave() 이벤트 메서드
    대상 요소의 경계 범위에서 마우스 포인터가 완전히 벗어나면 이벤트를 발생시킴.

    기본형

    $("이벤트 대상 선택").mouseleave(function(){자바스크립트 코드;});
$("이벤트 대상 선택").on("mouseleave",function(){자바스크립트 코드;});
$("이벤트 대상 선택").mouseleave(); // mouseleave이벤트 강제 발생

  • mousemove() 이벤트 메서드
    선택한 요소 범위에서 마우스 포인터를 움직였을 때 이벤트가 발생함.

    기본형

    $("이벤트 대상 선택").mousemove(function(){자바스크립트 코드;});
$("이벤트 대상 선택").on("mousemove",
- 컬렉션 아티클