jQuery - 이벤트 정리

마우스 이벤트(MOUSE EVENTS)

 

1.click(); - 마우스 클릭할 때 실행

$("button").click(function(){ //클릭할 때 실행할 때 명령 입력!! });

 

 

2.dblclick(); - 마우스 더블 클릭할 때 실행

$("button").dblclick(function(){
     //더블클릭할 때 실행할 명령 입력!!
})

 

 

3.mouseenter(); - 마우스가 요소 위에 올려질 때 실행

$("button").mouseenter(function(){
     //마우스가 요소에 올려질 때 실행할 명령 입력!!
});

 

 

4.mouseleave(); - 마우스가 요소 위에서 나갈 때 실행

$("button").mouseleave(function(){ 
     //마우스가 요소에 날갈 때 실행할 명령 입력!!
});

 

 

5.hover (); - mouseenter(); + mouseleave(); 

*메뉴바에서 많이 사용한다.

$("div").hover(function(){
     //마우스가 요소에 올려질 때 실행할 명령 입력!!
},function(){
     //마우스가 요소에 날갈 때 실행할 명령 입력!!
});

 

 

6.mousedown(); - 마우스가 눌러졌을 때 실행(*왼쪽클릭, 오른쪽클릭 모두 반응한다. )

$("button").mousedown(function(){ 
     //마우스가 눌러졌을 때 실행할 명령 입력!!
});

 

 

7.mouseup(); - 눌러진 마우스가 올라올 때 실행(*왼쪽클릭, 오른쪽클릭 모두 반응한다. )

$("button").mouseup(function(){ 
     //눌러진 마우스가 올라올 때 실행할 명령 입력!!
});

 

 

 

 

폼이벤트(FORM EVENTS)

 

1.submit() - 제출 이벤트가 발생할 때 실행

*<form> 요소에서만 사용한다.

$("form").submit(function(){
    alert("SUBMITTED");
});

 

 

2.change() - 요소 값이 변경되었을 때 실행

* <input>, <textarea>, <select> 요소에서만 사용한다.

$("input").change(function(){
    alert("CHANGED");
});

 

 

3.focus() - 포커스가 생겼을 때 실행

*아이디나 패스워드 입력창에서 사용한다.

$("input").focus(function(){ 
    //포커스가 생겼을 때 실행할 명령 입력!!
});

 

 

4.blur() - 포거스가 없어졌을 때 실행

*아이디나 패스워드 입력창에서 사용한다. 

$("input").blur(function(){ 
     //포커스가 사라졌을 때 실행할 명령 입력!!
});

 

 

 

윈도우 이벤트 (DOCUMENT / WINDOW EVENTS)

 

1.resize() - 브라우저 창이 크기를 변경할 때 발생

$(window).resize(function(){
	//사용할 효과
});

 

2.scroll() - 스크롤 할 때 발생

$(window).scroll(function(){
	//사용할 효과
});;

 

 

 

문서 로딩 이벤트 (LOADING EVENTS)

 

1.ready(); - 외부 리소스,이미지와 상관없이 DOM트리 생성 후 준비된 후에 실행 

*JQEURY 함수와 이벤트를 포함하는 것이 좋다.

*load()보다 빠르게 실행한다.

$(document).ready(function(){
	//실행할 코드
});

축약형 - 위의 코드와 같은 코드이다.

$(function(){
	//실행할 코드
});

(참고) - jQuery 3.0 버전에서 load(),unload() 이벤트는 제거 되었다.

load(); - 외부 리소스, 이미지 등 화면에 필요한 모든 요소를 올려진 다음 실행

unload(); - 해당 페이지를 빠져나갈 때에 발생

 

 

 

---

개인 공부용으로 만들었습니다. 
다른 분들에게도 도움이 되었으면 좋겠습니다. 
틀린 부분이 있으면 댓글을 남겨주시면 수정하겠습니다.