[jQuery] jQuery 이벤트 처리

jQuery 이벤트

이벤트 객체 속성

• event.pageX : 브라우저 화면을 기준으로 한 마우스의 X 좌표 위치
• event.pageY : 브라우저 화면을 기준으로 한 마우스의 Y 좌표 위치
• event.preventDefault() : 기본 이벤트 제거
• event.stopPropagation() : 이벤트 전달 제거

 

윈도우 이벤트

• ready : 윈도우(문서 객체)가 준비 완료했을 때 발생
• load : 윈도우(문서 객체)를 불러들일 때 발생
• unload : 윈도우(문서 객체)를 닫을 때 발생
• resize : 윈도우(문서 객체)의 크기를 변화시킬 때 발생
• scroll : 윈도우(문서 객체)를 스크롤할 때 발생
• error : 윈도우(문서 객체)에 에러가 있을 때 발생

// 윈도우 크기가 변경될 때 resize 이벤트 발생
$(window).resize(function() {
    var windowWidth = $(window).width()
    var windowHeight = $(window).height()
    ...
});

 

입력 양식 이벤트

• focus : 입력 양식에 초점을 맞추면 발생
• focunsin : 입력 양식에 초점이 맞춰지기 바로 전에 발생
• focusout : 입력 양식에 초점이 사라지기 바로 전에 발생
• blur : 입력 양식에 초점이 사라지면 발생
• change : 입력 양식의 내용을 변경할 때 발생
• select : 입력 양식을 선택할 때 발생함 (input[type=text] 태그와 textarea 태그 제외)

// target이 변경될 때마다 이벤트 발생
$('#target').change(function() {
    ...
})

 

마우스 이벤트

• click : 마우스를 클릭할 때 발생
• dblclick : 마우스를 더블클릭할 때 발생
• mousedown : 마우스 버튼을 누를 때 발생
• mouseup : 마우스 버튼을 뗄 때 발생
• mousemove : 마우스를 움직일 때 발생
• mouseenter : 마우스 요소의 경계 외부에서 내부로 이동할 때 발생
• mouseleave : 마우스 요소의 경계 내부에서 외부로 이동할 때 발생
• mouseout : 마우스가 요소를 벗어날 때 발생
• mouseover : 마우스가 요소 안에 들어올 때 발생

 

키보드 이벤트

• keypress : 글자가 입력될 때 발생
• keydown : 키보드가 눌러질 때 발생
• keyup : 키보드가 떼어질 때 발생

 

이벤트 연결

• one() : 이벤트를 한번만 연결
• on() : 이벤트 연결
• off() : 이벤트 제거
• trigger() : 이벤트 강제 발생
• toggle(이벤트1, 이벤트2, ...) : 여러 이벤트를 번갈아가며 실행할 수 있게 연결

// btn_add에 클릭 이벤트 연결
$('#btn_add').on('click', function(event) {
	...
})