[ jquery 기초 ] jquery Event - 이벤트 지원 메서드

 

| 이벤트란?

1. 시스템에서 일어나는 사건을 의미
2. Javascript나 jquery에게 이벤트란 브라우져에서 일어나는 사건을 의미한다. (클릭, 마우스이동, 타이핑, 페이지 로딩 등)
3. 이벤트가 발생했을 때 작동할 로직을 시스템에게 알려두면 이벤트가 발생했을 때 시스템이 그 로직을 호출한다. 이벤트에 대한 기본적인 내용은 자바스크립트 이벤트 편 참고 http://opentutorials.org/course/49

jQuery에서는 사용자가 발생시키는 이벤트를 쉽고, 간단하게 핸들링 할 수 있는 메소드를 지원하고 있습니다. 마우스의 클릭과 키보드의 입력은 물론이고 심지어 더블클릭과 마우스 휠에 대한 이벤트를 쉽게 처리 할 수 있습니다. jQuery에서 제공하는 이벤트 관련 메소드의 종류는 정말로 너무나 많습니다. 그 만큼 개발자가 많은 이벤트를 쉽게 이용할 수 있고 좀더 나은 UX를 만들 수 있다는 장점이 있습니다. 

이벤트 종류(형식)	이벤트 설명
.blur()	요소에서 포커스를 잃을 경우에 발생하는 이벤트 입니다.
.change()	<input />, <textarea />, <select /> 요소의 값 변경시 발생하는 이벤트 입니다.
.click()	마우스 클릭 시 발생하는 이벤트 입니다.
.dblclick()	마우스를 더블클릭 했을 경우 발생하는 이벤트 입니다.
.focus()	요소에 포커스 되었을 때 발생하는 이벤트 입니다.
.hover()	마우스가 요소 위에 위치했을 때 발생하는 이벤트 입니다.
.keydown()	키 입력 시 발생되는 이벤트이며, 모든 키에 대해 적용이 됩니다.
.keypress()	keydown 이벤트와 동일하게 키 입력 시 발생이 되지만 enter, tab등의 특수키에는 이벤트가 발생되지 않습니다.
.keyup()	키 입력 후 발생되는 이벤트 입니다.
.mousedown()	마우스 클릭 시 발생하는 이벤트입니다.
.mouseenter()	선택한 요소의 영역에 마우스가 위치했을 때 발생되는 이벤트 입니다.
.mouseleave()	선택한 요소의 영역에서 마우스가 벗어 났을 때 발생되는 이벤트 입니다. 인터넷익스플로러에서만 발생되는 이벤트지만 jQuery는 브라우저 관계없이 사용할 수 있도록 시뮬레이터 됩니다.
.mouseout()	선택한 요소의 영역에서 마우스가 벗어 났을 때 발생되는 이벤트입니다.
.mouseup()	마우스 클릭 후 발생되는 이벤트입니다.
.ready()	DOM이 모두 준비 되었을 때 발생하는 이벤트입니다.
.resize()	resize 될 경우 발생하는 이벤트입니다.
.scroll()	HTML 문서가 스크롤 되었을 때 발생하는 이벤트입니다.
.select()	선택한 개체를 마우스를 통해 선택 하였을 때 발생하는 이벤트입니다.
.submit()	Submit이 일어날 때 발생하는 이벤트입니다. (Form 메서드 참고)

 

• .click()
  • .click( handler(eventObject) )
  • .click( [eventData], handler(eventObject) )
  • .click()

마우스 클릭 시 동작하는 이벤트로 선택한 객체에 마우스 클릭 이벤트가 발생할 경우 해당 정의한 메서드가 실행 되며,  인자 값으로는 eventData로 이벤트에 대한 데이터 값이 전달이 됩니다. $(“div”).click(function() { alert(‘click’); } 이라고 정의 할 경우 HTML 문서에 존재하는 모든 DIV 요소에 “click” 이벤트를 할당하고, 정의한 메서드의 결과인 alert(‘click’);을 실행하게 됩니다. 웹에서 흔히 사용이 되지는 않지만 jQuery를 통해서 쉽게 구현이 가능한 마우스 더블클릭을 이용하고 싶다면, 위의 예제에서 .click() 메서드를 .dblclick()으로 변경만 하면 아무런 문제없이 사용이 가능합니다.

 

• .keydown( handler(eventObject) )
  • .keydown( handler(eventObject) )
  • .keydown( [eventData], handler(eventObject) )
  • .keydown()

.keydown() 이벤트를 사용하는 이유는 엔터키와 같은 특수 입력키에 대한 내용도 체크하기 위함이며, 특수키에 대한 값이 필요 없을 경우에는 .keypress() 를 사용하시면 됩니다. 입력되는 키에 따른 해당 “keyCode”값이 노출되는걸 확인 할 수 있으며, “Enter”, “Ctrl”, “Shift”등의 특수 키보드의 값도 확인 할 수 있습니다.