[Jquery] 제이쿼리 이벤트 등록 메서드를 사용하기

이벤트 등록 메서드

 이벤트 등록 메서드는 제이쿼리에서 여러 가지 이벤트들을 요소에 등록할 수 있는 메서드입니다. 먼저 제이쿼리 선택자로 이벤트를 등록할 요소를 지정하고 그 요소에 원하는 이벤트 메서드를 사용하면 됩니다.

 

마우스 이벤트 등록 메서드

 마우스와 관련된 이벤트를 등록하는 메서드입니다.

 

메서드명	설명
click(callback)	요소를 클릭하면 콜백함수를 실행합니다.
dbclick(callback)	요소를 더블클릭하면 콜백함수를 실행합니다.
focus(callback)	input 입력 양식에 커서가 입력되면 콜백함수를 실행합니다.
hover(callback)	호버 이벤트가 발생하면 콜백함수를 실행합니다.
mousedown(callback)	요소가 위치한 영역에 마우스 버튼을 누르면 콜백함수를 실행합니다.
mouseenter(callback)	요소가 위치한 영역에 마우스 커서가 들어가면 콜백함수를 실행합니다.
mouseleave(callback)	요소의 영역에서 마우스 커서가 벗어나면 콜백함수를 실행합니다.
mousemove(callback)	요소의 영역안에서 마우스 커서가 이동할 때마다 콜백함수를 실행합니다.
mouseup(callback)	요소의 영역에서 누른 마우스 버튼을 떼면 콜백함수를 실행합니다.

 

예시

$("button").click(function() {
  alert("click");
});

$("button").mouseenter(function() {
  alert("mouseenter");
});

$("button").mouseleave(function() {
  alert("mouseleave");
});

버튼을 클릭하거나 버튼에 마우스 커서가 들어갈 때, 벗어날 때 경고창에 각각의 메세지가 뜨는 것을 확인할 수 있습니다.

 

키 이벤트 등록 메서드

 키 입력 이벤트를 등록할 수 있는 메서드입니다.

 

메서드명	설명
keydown(callback)	어떤 키를 누를 때 콜백함수가 실행됩니다.(모든 키)
keypress(callback)	특정 키를 누를 때 콜백함수가 실행됩니다.(특정 키만)
keyup(callback)	어떤 키를 떼면 콜백함수가 실행됩니다.

 

예시

$("input").keydown(function() {
  alert("keydown");
});

$("input").keypress(function() {
  alert("keypress");
});

입력창에 커서를 놓고 아무키나 누르면 경고창이 뜨는 것을 확인 할 수 있습니다.

 

그 외의 나머지 이벤트 메서드

메서드명	설명
on("이벤트 종류", callback)	요소에 여러 개의 이벤트를 등록할 수 있습니다.
off("이벤트 종류")	on으로 등록된 이벤트를 삭제할 수 있습니다.
resize(callback)	윈도우 창 크기를 조절할 때 마다 콜백함수를 실행합니다.
scroll(callback)	스크롤을 할 때마다 콜백함수를 실행합니다.
select(callback)	요소에 드래그 이벤트가 발생할 때마다 콜백함수를 실행합니다.
submit()	선택한 form 요소에 담긴 정보를 전달합니다.
trigger("이벤트")	지정되어 있는 이벤트를 인자로 받아 그 이벤트를 실행합니다.

 

on, off

$("button").on("click mouseout", function() {
    alert(1);
});

$("button").off("mouseout"); // 이벤트 삭제

버튼에 cilck 이벤트와 mouseout 이벤트를 동시에 등록할 수 있습니다. off메서드로 on으로 등록한 이벤트를 삭제할 수 있습니다.