07. 제이쿼리(jQuery) 이벤트

웹 페이지는 사용자와의 상호작용을 기반으로 동작한다.

클릭, 입력, 마우스 이동 등 이러한 동작을 이벤트(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("한 번만 실행");
});