이벤트 등록 메서드란?
이벤트 등록 메서드에는 하나의 이벤트만 등록할 수 있는 단독 이벤트 등록 메서드와 2개 이상의 이벤트를 등록 할 수 있는 그룹 이벤트 등록 메서드가 있다
기본형
<button id="btn">버튼</button>
$("#btn").click(function(){});이벤트 등록 메서드의 종류
| 구분 | 종류 | 설명 |
| 로딩이벤트 | load() | 선택한 이미지 또는 프레임 요소에 연동된 소스의 로딩이 완료된 후 이벤트가 발생 |
| ready() | 지정한 HTML 문서 객체의 로딩이 완료된 후 이벤트가 발생 | |
| error() | 이벤트 대상 요소에서 오류가 발생하면 이벤트가 발생 | |
| 마우스 이벤트 | click() | 선택한 요소를 클릭했을 때 이벤트가 발생 |
| dbclick() | 선택한 요소를 연속해서 두 번 클릭 했을 때 이벤트 발생 | |
| mouseout() | 선택한 요소의 영역에서 마우스 포인터가 벗어났을 때 이벤트 발생, 이때 하위요소들도 영향을 받음 | |
| mouseover() | 선택한 요소의 마우스 영역에 마우스 포인터를 올렸을 때 이벤트 발생 | |
| mousedown() | 선택한 요소에서 마우스 버튼을 눌렀을 때 이벤트가 발생 | |
| mouseup() | 선택한 요소에서 마우스 버튼을 눌렀다 떼었을 때 이벤트가 발생 | |
| mouseenter() | 선택한 요소 범위에 마우스 포인터를 올렸을 때 이벤트 발생 | |
| mouseleave() | 선택한 요소 범위에서 마우스 포인터가 벗어났을 때 이벤트가 발생 | |
| mousemove() | 선택한 요소 범위에서 마우스 포인터를 움직 였을 때 이벤트 발생 | |
| scroll() | 가로/세로 스크롤바 움직일 때 마다 이벤트 발생 | |
| hover() | 선택한 요소에 마우스 포인터를 오렸을 때와 벗어났을 때 각각 이벤트가 발생. | |
| 포커스 이벤트 | focus() | 선택한 요소에 포커스가 생성 되었을 때 이벤트를 발생하거나 선택한 요소에 강제로 포커스 생성 |
| focusin() | 선택한 요소에 포커스가 생성 되었을 때 이벤트 발생 | |
| focusout() | 포커스가 선택한 요소에서 다른 요소로 이동 되었을 때 이벤트 발생 | |
| blur() | 포커스가 선택한 요소에서 다른 요소로 이동되었을 때 이벤트가 발생하거나 선택한 요소의 포커스가 강제로 사라지도록 함 | |
| change() | 이벤트 대상인 입력 요소의 값이 변경되고, 포커스가 이동하면 이벤트 발생. 그리고 강제로 change이벤트를 발생시킬 때도 사용 | |
| 키보드 이벤트 | keypress() | 선택한 요소에서 키보드를 눌렀을 때 이벤트가 발생 그리고 문자 키를 제외한 키의 코드값을 반환 |
| keydown() | 선택한 요소에서 키보드를 눌렀을 때 이벤트가 발생 키보드의 모든 키의 코드값 반환 | |
| keyup() | 선택한 요소에서 키보드에서 손 떼었을 때 이벤트 발생 |
이벤트 등록 방식
단독 이벤트 등록 방식 / 그룹 이벤트 등록 방식
단독 이벤트 등록 메서드는 대상에 한가지 동작에 대한 이벤트만 등록가능
$("이벤트 대상 선택").이벤트 등록 메서드(function(){
자바스크립트 코드
});
그룹 이벤트 등록 메서드
그룹 이벤트 등록 메서드는 대상에 한 가지 동작 이상의 이벤트를 등록할 수 있다.
on()메서드 등록 방식 1
$("이벤트 대상선택").on("이벤트 종류 1 이벤트종류 2... 이벤트 종류 n",
function() {
자바스크립트 코드;
}
});
on() 메서드 등록 방식 2
$("이벤트 대상 선택").on ({
"이벤트 종류 1 이벤트 종류 2... 이벤트 종류 n" : function() {
자바스크립트 코드;
}
});
on() 메서드 등록 방식 3
$("이벤트 대상 선택").on ({
"이벤트 종류1": function() {자바스크립트 코드;1},
"이벤트 종류2": function() {자바스크립트 코드;2},
....
"이벤트 종류 n " : function() {자바스크립트 코드 ; n}
});
예시 ) 예시를 통해 이벤트 등록 메서드 , 그룹 이벤트 등록 메서드 등록에 대해서 알아 보겠습니다.
