언어공부/JavaScript&jQuery
제이쿼리(jQuery) 기초 문법 - 제이쿼리 이벤트 (1) 이벤트 등록 메소드
yeony
2021. 8. 6. 00:24
제이쿼리(jQuery) 기초 문법
제이쿼리 이벤트
이벤트 등록 메소드
이벤트란 사이트에서 방문자가 취하는 모든 행위를 말하고, 이벤트 핸들러는 이벤트가 발생했을 때 실행되는 코드를 말한다. 이벤트 등록 메소드를 이용하면 방문자가 지정한 요소에서 어떠한 특정 동작이 일어났을 때 저장된 코드를 실행시킬 수 있다.
이벤트 등록 메소드에는 하나의 이벤트만 등록할 수 있는 단독 이벤트 등록 메소드와 2개 이상의 이벤트를 등록할 수 있는 그룹 이벤트 등록 메소드가 있다.
<body>
<button id="btn">버튼</button>
<script>
$("#btn").click(function(){
자바스크립트 코드;
});
</script>
</body>
여기서 $("#btn")은 이벤트 대상이고, click()은 이벤트 등록 메소드, function(){...}는 이벤트 핸들러이다.
단독 이벤트 등록 메소드는 로딩이벤트, 마우스이벤트, 포커스이벤트, 키보드이벤트, 기타이벤트로 나눌 수 있다.
| 구분 | 종류 | 설명 |
| 로딩 이벤트 | load() | 선택한 이미지 또는 프레임 요소에 연동된 소스의 로딩이 완료된 후 이벤트가 발생한다. |
| ready() | 지정한 HTML문서 객체의 로딩이 완료된 후 이벤트가 발생한다. | |
| error() | 이벤트 대상 요소에서 오류가 발생하면 이벤트가 발생한다. | |
| 마우스 이벤트 | click() | 선택한 요소를 클릭했을 때 이벤트가 발생한다. |
| dbclick() | 선택한 요소를 연속해서 두 번 클릭했을 때 이벤트가 발생한다. | |
| mouseover() | 선택한 요소의 영역에 마우스 포인터를 올렸을 때 발생된다. | |
| hover() | 선택한 요소에 마우스 포인터를 올렸을 때와 벗어났을 때 각각 이벤트가 발생한다. | |
| mousemove() | 선택한 요소 범위에서 마우스 포인터를 움직였을 때 이벤트가 발생한다. | |
| scroll() | 가로, 세로 스크롤바를 움직일 때 마다 이벤트가 발생한다. | |
| 포커스 이벤트 | focus() | 선택한 요소에 포커스가 생성되었을 때 이벤트를 발생하거나 선택한 요소에 강제로 포커스를 생성한다. |
| focusin() | 선택한 요소에 포커스가 생성되었을 때 이벤트가 발생한다. | |
| focusout() | 포커스가 선택한 요소에서 다른 요소로 이동되었을 때 이벤트가 발생한다. | |
| blur() | 포커스가 선택한 요소에서 다른 요소로 이동되었을 때 이벤트가 발생하거나 선택한 요소의 포커스가 강제로 사라지도록 한다. | |
| change() | 이벤트 대상인 입력 요소의 값이 변경되고, 포커스가 이동하면 이벤트가 발생한다. 그리고 강제로 change이벤트를 발생시킬 때도 사용한다. | |
| 키보드 이벤트 | keypress() | 선택한 요소에서 키보드를 눌렀을 때 이벤트가 발생한다. 그리고 문자 키를 제외한 키의 코드값을 반환한다. |
| keydown() | 선택한 요소에서 키보드를 눌렀을 때 이벤트가 발생한다. 키보드의 모든 키의 코드값을 반환한다. | |
| keyup() | 선택한 요소에서 키보드에서 손을 떼었을 때 이벤트가 발생한다. |
이벤트 등록 방식 알아보기
한가지 동작에 대한 이벤트 등록방식에는 단독 이벤트 등록 메소드나 그룹 이벤트 등록 메소드를 사용하고, 두 가지 이상의 동작에 대한 이벤트 등록 방식에는 그룹 이벤트 등록 메소드를 사용한다.
단독 이벤트 등록 메소드
대상에 한 가지 동작에 대한 이벤트만 등록할 수 있다.
<script>
$("이벤트 대상 선택").이벤트 등록 메소드(function(){
자바스크립트 코드
});
$("#btn").click(function(){
alert('버튼을 누름');
});
</script>
그룹 이벤트 등록 메소드
대상에 한 가지 동작 이상의 이벤트를 등록할 수 있다. on()메소드를 사용하여 이벤트를 등록한다.
<script>
//on()메소드 등록방식 1
$("이벤트 대상 선택").on("이벤트종류 1 이벤트종류 2 ...",
function(){
자바스크립트 코드
});
$("#btn").on("mouseover focus",
function(){
alert("이벤트실행");
});
//on()메소드 등록방식 2
$("이벤트 대상 선택").on({
"이벤트 종류1":function(){자바스크립트 코드 1;},
"이벤트 종류2":function(){자바스크립트 코드 2;}
});
$("#btn").on({
"mouseover":function(){
alert("마우스 포인터 올려짐");
}
"focus":funtion(){
alert("포커스 생성됨");
}
});
</script>
사용자가 버튼에 마우스 포인터를 올리거나 키보드를 사용하여 버튼에 포커스를 맞추면 alert()메소드가 실행된다.