제이쿼리 이벤트(Event) 종류에 대해 알아보자

이벤트(Event) 란?

-전역에 작성된 프로그램은 프로그램이 실행됨과 동시에 실행되지만 함수(Function)으로 묶인 부분은 호출하지 않으면 실행되지않는다.

따라서 원하는 시점에 원하는 기능을 실행하기 위해서는 프로그램이 실행되게끔 설정해줘야 한다.

이런 역할을 하는 것이 Event 이며, 모든 함수는 Event와 연결되어 호출되는 형태를 가진다.

 

-제이쿼리 이벤트 처리방식 -> 객체에 직접적으로 이벤트를 등록한다.

$(“div”).click(function(){
  alert(“hello”);
});

-익명적 함수

 

function sum(){
  alert(“hello”);
}
$(“div”).click(sum);

-선언적 함수

 

 

• 제이쿼리 마우스 이벤트

click	노드(Elements)를 마우스 포인터로 눌렀다 떼었을 때 발생
dbclick	노드를 더블클릭 했을 때 발생
hover	mouseenter, mouseleave 이벤트를 한번에 작동
mousedown	노드 영역에서 마우스를 눌렀다가 떼었을때 발생
mouseenter	노드가 마우스에 진입했을 때 발새 (자식노드에서는 이벤트 감지 x)
mouseleave	마우스가 노드에서 벗어났을 때 발생
mousemove	노드 영역에서 마우스를 움직였을 때 발생
mouseout	노드에서 마우스 포인터가 떠났을 때 발생
mouseup	마우스 포인터를 노드에 올려 놓고 마우스 버튼을 올렸다 떼었을 때 발생
toggle	click 이벤트에 핸들러를 바인딩하고 클릭할때마다 실행될 함수들을 차례대로 실행

*바인딩(Binding) : 프로그램의 어떤 기본단위가 가질 수 있는 구성요소의 구체적인 값, 성격을 확정하는 것을 말한다.

*이벤트 핸들러 : 어떠한 사건에 대한 동작을 다룬다(ex.웹에서 콘텐츠를 열면 내용이 나오고 닫기를 누르면 닫히게 되는 등...

= 마우스가 버튼에 닿았을 때 -> 사건 (Action) +  마우스가 버튼에 닿으면 색깔이 변함 -> 사건에 대한 동작)

*javascript node는 태그노드와 텍스트 노드 전체를 말한다.

*javascript Element는 텍스트 노드를 제외하고 태그(ex.div ...)만 말한다.

 

• 제이쿼리 문서로딩 이벤트

ready	해당 페이지가 로딩되었을 때 발생(처음 읽힐 때)
unload	해당 페이지를 빠져나갈 때 발생

 

• 제이쿼리 폼 이벤트

blur	노드에서 포커스가 떠날 때에 발생
change	노드의 값이 변경될 때에 발생
focus	노드가 포커스를 획득했을 때에 발생
select	유저가 텍스트를 선택했을 때 발생
submit	폼의 내용을 전송할 때에 발생

 

• 제이쿼리 웹 브라우저 이벤트

resize	웹브라우저 윈도우 사이즈의 변화가 있을 때 발생
scroll	스크롤이 움직일 때 발생

 

• 키보드 이벤트

keydown	키보드 버튼을 눌렀을 때 이벤트 발생
keyup	키보드 버튼을 누른 상태에서 떼었을때 이벤트 발생
keypress	키보드 버튼을 계속 누르고 있으면 이벤트 발생