본문 바로가기

WEB/HTML CSS JS

4. jquery event method 이벤트 등록 메서드(단일, 그룹)

반응형

제이쿼리를 사용하면 이벤트 등록 메서드를 통해 간단하게 이벤트 처리를 할 수 있다.

이벤트 등록 메서드

메서드 설명
$("대상").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()로 등록한 이벤트 제거

끝으로

여기까지 이벤트 메서드를 공부해 봤다.

공부하면서 마우스나 키보드로 이벤트가 발생해 스타일이 변하니 조금 덜 지루했다.

올해 안에 책을 다 읽으려고 했는데, 조금 힘들어 보인다.

반응형