jQuery 입문 | 이벤트 처리 | 이벤트 메소드 .click() .hover() .keypress() .focusin()

이벤트 메소드

jQuery는 .on() 메소드 이외에도 자바스크립트 이벤트와 관련된 다양한 메소드를 제공한다.
이러한 이벤트 메소드는 이벤트가 발생하는 요소에 따라 다음과 같이 구분할 수 있다.

1. 마우스 이벤트와 관련된 메소드
2. 키보드 이벤트와 관련된 메소드
3. 입력 양식 이벤트와 관련된 메소드

마우스 이벤트와 관련된 메소드

jQuery에서 제공하는 마우스 이벤트와 관련된 메소드는 다음과 같다.

.click() 메소드와 .dblclick() 메소드

.click() 메소드는 자바스크립트의 “click” 이벤트가 이벤트 핸들러를 연결되고, 해당 요소에 “click” 이벤트가 발생되었을 때 설정한 함수가 실행된다.

.dblclick() 메소드는 자바스크립트의 “dblclick” 이벤트가 이벤트 핸들러를 연결되고, 해당 요소에 “dblclick” 이벤트가 발생되었을 때 설정한 함수가 실행된다.

아래 예제는 버튼이 클릭되거나 더블 클릭되었을 때 상태를 출력하는 예제이다.

$("button").click(function() {
  $("div").text("클릭이 되었습니다.");
});
$("button").dblclick(function() {
  $("div").text("더블 클릭이 되었습니다.");
});

코드 실행

.hover() 메소드

.hover() 메소드는 자바스크립트의 “mouseenter"와 “mouseleave” 이벤트를 하나의 이벤트 핸들러와 연결되고, 해당 요소에 “mouseenter"와 “mouseleave” 이벤트가 발생되었을 때 설정한 함수가 실행된다.

아래 예제는 버튼에 마우스가 올라오거나 빠져나갔을 때 상태를 출력하는 예제이다.

$("button").hover(function() {
  $("#text").text("마우스가 올라왔습니다.");
}, function(){
  $("#text").text("마우스가 빠져나갔습니다.");
});

코드 실행

설정한 함수가 두개이면 첫번째 함수는 “mouseenter” 이벤트가 발생할 시에 실행되고, 두번째 함수는 첫번째 함수는 “mouseleave” 이벤트가 발생할 시에 실행된다.

설정한 함수가 한개인 경우에는 “mouseenter” 이벤트와 “mouseleave” 이벤트 중에 하나만 발생하면 한개의 함수가 실행된다.

키보드 이벤트와 관련된 메소드

.keypress() 메소드

.keypress() 메소드는 자바스크립트의 “keydown” 이벤트가 이벤트 핸들러를 연결되고, 해당 요소에 “keydown” 이벤트가 발생되었을 때 설정한 함수가 실행된다.

다음 예제는 <input>요소에 키보드로 문자를 입력할 때마다 카운팅하여 출력하는 예제이다.

var i = 0;
$("input").keypress(function() {
  $("#text").text((++i) + "번 키보드가 눌렸습니다.");
});

코드 실행

Shift, Esc, Delete와 같은 화면에 출력되지 않는 키(modifier and non-printing keys)들은 “keydown” 이벤트는 발생시키지만, “keypress” 이벤트는 발생시키지 않는다.

입력 양식 이벤트와 관련된 메소드

.focusin() 메소드와 .focusout() 메소드

.focusin() 메소드는 “focusin” 이벤트가 이벤트 핸들러를 연결되고, 해당 요소에 “focusin” 이벤트가 발생되었을 때 설정한 함수가 실행된다.

.focusout() 메소드는 “focusout” 이벤트와 이벤트 핸들러를 연결하거나, 해당 요소에 “focusout” 이벤트가 발생되었을 때 설정한 함수가 실행된다.

$("input").focusin(function() {
  $(this).css("background-color", "yellow");
});

$("input").focusout(function() {
  $(this).css("background-color", "white");
});

코드 실행

this 키워드는 현재 선택되어 있는 요소 그 자체를 가리킨다.

참조

• https://api.jquery.com/click/
• https://api.jquery.com/dblclick/
• https://api.jquery.com/hover/
• https://api.jquery.com/keypress/
• https://api.jquery.com/focusout/
• https://api.jquery.com/focusin/