반응형
제이쿼리를 사용하면 이벤트 등록 메서드를 통해 간단하게 이벤트 처리를 할 수 있다.
이벤트 등록 메서드
메서드 | 설명 |
$("대상").ready(function(){ }) | DOM 객체의 로딩이 끝나면 |
$("대상").load(function(){ }) | 외부 연동 소스의 로딩이 끝나면 |
$("대상").error(function(){ }) | 오류가 발생하면 |
$("대상").click(function(){ }) | 클릭 했을 때 |
$("대상").dbclick(function(){ }) | 더블 클릭 했을 때 |
$("대상").mouseout(function(){ }) | 마우스 포인터가 벗어났을 때 |
$("대상").mouseover(function(){ }) | 마우스 포인터를 올렸을 때 |
$("대상").hover(function(){오버}, function(){아웃}) | 마우스 포인터가 올라오거나 벗어날 때 |
$("대상").mousedown(function(){ }) | 마우스 버튼을 눌렀을 때 |
$("대상").mouseup(function(){ }) | 마우스 버튼을 떼었을 때 |
$("대상").mouseenter(function(){ }) | 마우스 포인터를 올렸을 때 |
$("대상").mouseleave(function(){ }) | 마우스 포인터가 벗어날을 때 |
$(document).mousemove(function(){ }) | 마우스 포인터를 움직였을 때 |
$(window).scroll(function(){ }) | 마우스 스크롤을 움직였을 때 |
$("대상").focus(function(){ }) | 포커스가 지정 됐을 때 |
$("대상").focusin(function(){ }) | 포커스가 지정 됐을 때 |
$("대상").focusout(function(){ }) | 포커스가 벗어났을 때 |
$("대상").blur(function(){ }) | 포커스가 벗어났을 때 |
$("대상").change(function(){ }) | 값이 변경되고, 포커스가 벗어났을 때 |
$("대상").keypress(function(){ }) | 키보드를 눌렀을 때 |
$("대상").keydown(function(){ }) | 키보드를 눌렀을 때 |
$("대상").keyup(function(){ }) | 키보드를 떼었을 떄 |
이벤트 객체 속성
이벤트 등록 메서드 매개변수로 접근 가능한 속성과 메서드
속성, 메서드 | 설명 |
clientX | 마우스 포인터의 X 좌표 |
clientY | 마우스 포인터의 Y 좌표 |
pageX | 스크롤 X축 거리 + 마우스 포인터의 X 좌표 |
pageY | 스크롤 Y축 거리 + 마우스 포인터의 Y 좌표 |
screenX | 모니터 기준 마우스 포인터의 X 좌표 |
scrennY | 모니터 기준 마우스 포인터의 Y 좌표 |
layerX | position 기준 마우스 포인터의 X 좌표 |
layerY | position 기준 마우스 포인터의 Y 좌표 |
button | 마우스 왼쪽 0, 휠 1, 오른쪽 2 |
keyCode | 키보드 아스키 코드 값 |
altKey | Alt 눌렸으면 true, 아니면 false |
ctrlKey | Ctrl 눌렸으면 true, 아니면 false |
shiftKey | Shift 눌렸으면 true, 아니면 false |
target | target 이벤트가 전파된 마지막 요소 |
cancelBubble | 이벤트 전파 차단 속성 |
stopPropagation() | 이벤트 전파를 차단 |
preventDefault() | 기본 이벤트를 차단 |
그룹 이벤트 등록, 제거 메서드
메서드 | |
$("대상").on("이벤트1 이벤트2",function(){ }) | 2개 이상의 이벤트를 등록 |
$("상위 요소").delegate("하위 요소","이벤트1 이벤트2" , function(){ }) |
하위 요소에 이벤트를 등록 |
$("대상").one("이벤트1 이벤트2",function(){ }) | 한번 작동하는 이벤트 등록 |
$("대상").off("이벤트1 이벤트2") | on()으로 등록한 이벤트 제거 |
$("상위 요소").undelegate("하위 요소","이벤트1 이벤트2") | delegate()로 등록한 이벤트 제거 |
끝으로
여기까지 이벤트 메서드를 공부해 봤다.
공부하면서 마우스나 키보드로 이벤트가 발생해 스타일이 변하니 조금 덜 지루했다.
올해 안에 책을 다 읽으려고 했는데, 조금 힘들어 보인다.
반응형
'WEB > HTML CSS JS' 카테고리의 다른 글
6. jquery ajax 오토셋(autoset)으로 php, ajax로 도서관 정보나루 api 실습하기 (0) | 2023.01.02 |
---|---|
5. jquery animation method 애니메이션 메서드 (0) | 2022.12.31 |
3. jquery DOM maniputlation 객체 조작 메서드(속성, 수치, 편집) (0) | 2022.12.29 |
2. jquery selectors 여러가지 선택자들(기본, 탐색) (0) | 2022.12.28 |
1. jquery 연동하고 hello jquery (0) | 2022.12.27 |