이벤트 메소드
이벤트 메소드
제이쿼리는 on() 메소드 이외에도 자바스크립트 이벤트와 관련된 다양한 메소드를 제공합니다.
이러한 이벤트 메소드는 이벤트가 발생하는 요소에 따라 다음과 같이 구분할 수 있습니다.
1. 마우스 이벤트와 관련된 메소드
2. 키보드 이벤트와 관련된 메소드
3. 입력 양식(form) 이벤트와 관련된 메소드
마우스 이벤트와 관련된 메소드
제이쿼리에서 제공하는 마우스 이벤트와 관련된 대표적인 메소드는 다음과 같습니다.
1. .click()
2. .dblclick()
3. .hover()
.dblclick() 메소드
.dblclick() 메소드는 자바스크립트의 "dblclick" 이벤트와 이벤트 핸들러를 연결하거나, 해당 요소에 "dblclick" 이벤트를 발생시킵니다.
예제
$(function() {
$("button").click(function() { // 모든 <button>요소에 click 이벤트를 설정함.
$("#clickText").css("color", "red");
$("#dblclickText").css("color", "black");
});
$("button").dblclick(function() { // 모든 <button>요소에 dblclick 이벤트를 설정함.
$("#dblclickText").css("color", "red");
$("#clickText").css("color", "black");
});
});
.hover() 메소드
.hover() 메소드는 자바스크립트의 "mouseenter"와 "mouseleave" 이벤트를 같이 이벤트 핸들러와 연결합니다.
예제
$(function() {
$("button").hover(function() { // 모든 <button>요소에 hover 이벤트를 설정함.
$("#text").append("마우스가 버튼 위로 진입하거나 빠져나갔어요!<br>");
});
});
마우스 이벤트와 관련된 메소드
| 메소드 | 설명 |
|---|---|
| .click() | 자바스크립트의 "click" 이벤트와 이벤트 핸들러를 연결하거나, 해당 요소에 "click" 이벤트를 발생시킴. |
| .dblclick() | 자바스크립트의 "dblclick" 이벤트와 이벤트 핸들러를 연결하거나, 해당 요소에 "dblclick" 이벤트를 발생시킴. |
| .hover() | 자바스크립트의 "mouseenter"와 "mouseleave" 이벤트를 같이 인벤트 핸들러와 연결함. |
| .mousedown() | 자바스크립트의 "mousedown" 이벤트와 이벤트 핸들러를 연결하거나, 해당 요소에 "mousedown" 이벤트를 발생시킴. |
| .mouseenter() | 해당 요소 위로 마우스가 진입할 때 발생하는 이벤트와 이벤트 핸들러를 연결하거나, 해당 요소에 마우스 진입 이벤트를 발생시킴. |
|
.mouseleave() |
해당 요소에서 마우스가 빠져나갈 때 발생하는 이벤트와 이벤트 핸들러를 연결하거나, 해당 요소에 마우스가 빠져나가는 이벤트를 발생시킴. |
| .mousemove() | 자바스크립트의 "mousemove" 이벤트와 이벤트 핸들러를 연결하거나, 해당 요소에 "mousemove" 이벤트를 발생시킴. |
| .mouseout() | 자바스크립트의 "mouseout" 이벤트와 이벤트 핸들러를 연결하거나, 해당 요소에 "mouseout" 이벤트를 발생시킴. |
| .mouseover() | 자바스크립트의 "mouseover" 이벤트와 이벤트 핸들러를 연결하거나, 해당 요소에 "mouseover" 이벤트를 발생시킴. |
| .mouseup() | 자바스크립트의 "mouseup" 이벤트와 이벤트 핸들러를 연결하거나, 해당 요소에 "mouseup" 이벤트를 발생시킴. |
.keypress() 메소드
.keypress() 메소드는 자바스크립트의 "keypress" 이벤트와 이벤트 핸들러를 연결합니다.
다음 예제는 <input>요소에 키보드로 문자를 입력할 때마다 입력한 문자에 해당하는 유니코드(unicode) 숫자를 출력하는 예제입니다.
예제
$(function() {
// 아이디가 "key"인 요소에 keypress 이벤트를 설정함.
$("#key").on("keypress", function(event) {
$("#str").html(event.type + " : " + event.which);
});
});
키보드 이벤트와 관련된 메소드
| 메소드 | 설명 |
|---|---|
| .keydown() | 자바스크립트의 "keydown" 이벤트와 이벤트 핸들러를 연결하거나, 해당 요소에 "keydown" 이벤트를 발생시킴. |
| .keyup() | 자바스크립트의 "keyup" 이벤트와 이벤트 핸들러를 연결하거나, 해당 요소에 "keyup" 이벤트를 발생시킴. |
| .keypress() | 자바스크립트의 "keypress" 이벤트와 이벤트 핸들러를 연결하거나, 해당 요소에 "keypress" 이벤트를 발생시킴. |
.focusin() 메소드와 .focusout() 메소드
.focusin() 메소드는 자바스크립트의 "focusin" 이벤트와 이벤트 핸들러를 연결합니다.
또한, .focusout() 메소드는 자바스크립트의 "focusout" 이벤트와 이벤트 핸들러를 연결합니다.
예제
$(function() {
// 아이디가 "focus"인 요소에 focusin 이벤트를 설정함.
$("#focus").on("focusin", function(event) {
$(this).css("backgroundColor", "yellow");
});
// 아이디가 "focus"인 요소에 focusout 이벤트를 설정함.
$("#focus").on("focusout", function(event) {
$(this).css("backgroundColor", "white");
});
});
입력 양식 이벤트와 관련된 메소드
| 메소드 | 설명 |
|---|---|
| .blur() | 자바스크립트의 "blur" 이벤트와 이벤트 핸들러를 연결하거나, 해당 요소에 "blur" 이벤트를 발생시킴. |
| .change() | 자바스크립트의 "change" 이벤트와 이벤트 핸들러를 연결하거나, 해당 요소에 "change" 이벤트를 발생시킴. |
| .select() | 자바스크립트의 "select" 이벤트와 이벤트 핸들러를 연결하거나, 해당 요소에 "select" 이벤트를 발생시킴. |
| .submit() | 자바스크립트의 "submit" 이벤트와 이벤트 핸들러를 연결하거나, 해당 요소에 "submit" 이벤트를 발생시킴. |
| .focus() | 자바스크립트의 "focus" 이벤트와 이벤트 핸들러를 연결하거나, 해당 요소에 "focus" 이벤트를 발생시킴. |
|
.focusin() |
"focusin" 이벤트와 이벤트 핸들러를 연결하거나, 해당 요소에 "focusin" 이벤트를 발생시킴. |
| .focusout() | "focusout" 이벤트와 이벤트 핸들러를 연결하거나, 해당 요소에 "focusout" 이벤트를 발생시킴. |
