마우스 이벤트 메소드

제이쿼리는 마우스 관련 상호작용을 처리할 수 있는 다양한 메소드를 제공합니다.

주요 메소드

• .click() : 클릭 이벤트 처리
• .dblclick() : 더블 클릭 처리
• .hover() : mouseenter와 mouseleave를 동시에 처리
• .mousedown() / .mouseup() : 마우스 버튼 누름 / 해제 시
• .mousemove() : 요소 위에서 마우스 움직일 때
• .mouseenter() / .mouseleave() : 요소에 진입 / 벗어날 때
• .mouseover() / .mouseout() : 요소에 마우스 올림 / 빠짐 (버블링 포함)

예제

$(function() {
  $("button").click(function() {
    $("#clickText").css("color", "red");
  });

  $("button").dblclick(function() {
    $("#dblclickText").css("color", "blue");
  });

  $("button").hover(function() {
    $("#text").append("마우스가 버튼 위에 진입하거나 나갔어요!<br>");
  });
});

---

키보드 이벤트 메소드

키보드를 눌렀을 때의 행동을 감지해 처리할 수 있습니다.

주요 메소드

• .keydown() : 키가 눌릴 때
• .keyup() : 키를 뗄 때
• .keypress() : 입력 가능한 키가 눌릴 때 (※ 일부 키는 감지 안 됨)

예제

$(function() {
  $("#key").on("keypress", function(event) {
    $("#str").html("입력한 키 코드: " + event.which);
  });
});

keypress는 Enter, 문자 키 등만 감지하며, keydown은 모든 키를 감지합니다.

---

입력 양식 이벤트 메소드

사용자 입력 폼과 관련된 동작을 감지하고 처리할 수 있습니다.

주요 메소드

• .focus() / .blur() : 포커스 진입 / 이탈
• .focusin() / .focusout() : 버블링 지원되는 포커스 이벤트
• .change() : 값이 변경되었을 때
• .select() : 텍스트 선택 시
• .submit() : 폼 제출 시

예제

$(function() {
  $("#focus").on("focusin", function() {
    $(this).css("backgroundColor", "yellow");
  });
  $("#focus").on("focusout", function() {
    $(this).css("backgroundColor", "white");
  });
});

// 값 변경
$("#inputField").on("change", function() {
  $("#text").html("입력 값 변경됨: " + $(this).val());
});

// 폼 제출 방지
$("#form").on("submit", function(event) {
  event.preventDefault();
  alert("폼이 제출되지 않았습니다!");
});

---

이벤트 직접 발생 – .trigger()

이벤트를 프로그래밍적으로 강제 실행할 수 있는 메소드입니다.

$(function() {
  $("#triggerBtn").on("click", function() {
    $("#clickText").trigger("click");
  });
});

• .trigger("이벤트명")을 사용하면 해당 이벤트가 강제로 실행됩니다.

---

마우스·키보드·폼 이벤트 간 비교

• 마우스: .click(), .hover(), .mouseenter() 등
• 키보드: .keypress(), .keydown(), .keyup()
• 폼: .focus(), .change(), .submit(), .select()

각 이벤트는 사용자의 행동을 더 구체적으로 반영할 수 있게 도와줍니다.

---

질문 정리

keypress와 keydown의 차이점은 무엇인가요?

→ keypress는 문자 입력 가능한 키에만 반응하며, keydown은 모든 키 입력에 반응합니다.

hover는 어떻게 동작하나요?

→ mouseenter와 mouseleave 이벤트를 한꺼번에 처리할 수 있게 도와주는 단축 메소드입니다.

폼 제출을 막으려면 어떻게 하나요?

→ .submit() 이벤트에서 event.preventDefault()를 호출하면 기본 제출을 방지할 수 있습니다.

trigger()는 언제 쓰나요?

→ 특정 요소의 이벤트를 수동으로 발생시켜야 할 때 사용합니다. 예: 자동 클릭, 테스트 등.

---

실용 팁

1. 동적 요소 이벤트 처리 시

   .on() 메소드와 이벤트 위임을 활용하세요.

2. 이벤트 중복 방지

   .off()를 사용해 이전 이벤트를 제거하거나 .one()으로 한 번만 실행되게 설정하세요.

3. 기본 동작과 전파 제어

   event.preventDefault()와 event.stopPropagation()을 통해 브라우저의 기본 행동이나 상위 요소로의 전파를 차단할 수 있습니다.