[jQuery] 제이쿼리 주요 이벤트 리스너와 예제

Front-End/jQuery 2017. 1. 5. 16:32

제이쿼리 주요 이벤트 리스너와 예제

1. 주요 이벤트

1) 마우스

분류	이벤트	개요
마우스	click	요소를 클릭
	dblclick	요소 더블 클릭
	mousedown	마우스 버튼을 눌렀다
	mouseenter	요소에 마우스 포인터 진입
	mouseleave	요소에 마우스 포인터 벗어남
	mousemove	요소 위에 마우스 포인터가 이동함
	mouseout	요소에서 마우스 포인터 나감
	mouseover	요소에 마우스 포인터 올라감
	mouseup	마우스 버튼에서 손을 떼었다

2) 키

분류	이벤트	개요
키	keydown	키를 눌렀다
	keypress	키를 누르고 있다
	keyup	키에서 손을 떼었다

3) 폼

분류	이벤트	개요
폼	blur	요소로부터 포커스가 벗어남
	focus	요소에 포커스가 주어졌다
	focusin	요소에 포커스가 들어갔다(이벤트 버블링 있음)
	focusout	요소에서 포커스가 벗어났다(이벤트 버블링 있음)
	change	요소의 값을 변경했다(input, select, textarea..)
	select	텍스트 상자/텍스트 영역의 텍스트를 선택
	submit	폼에서 송신했다

4) 기타

분류	이벤트	개요
기타	resize	창 크기를 변경
	scroll	페이지나 요소를 스크롤했다
	contextmenu	콘텍스트 메뉴를 표시하기 전

2. mouseenter/mouseleave 와 mouseover/mouseout

1) 차이점

- mouseenter/mouseleave : 대상 요소에 대해서만 이벤트가 발생

- mouseover/mouseout : 안쪽의 요소에 들어오고 나갈 때에도 발생(중첩시)

2) 예제

A. mouseenter/mouseleave

<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Title</title> <style> #outer{ postition : absolute; margin:0 auto; top:0; left:0; right:0; bottom:0; width:200px; height:200px; border: 1px solid black; } #inner{ width:100px; height:100px; border: 1px solid black; } </style> </head> <div id="outer"> outer <div id="inner"> inner </div> </div> <div id="result"></div> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script> $(function(){ $('#outer') .mouseenter(function(e){ $('#result').html($('#result').html() + 'mouseenter:' + e.target.id+'<br/>'); }) .mouseleave(function(e){ $('#result').html($('#result').html() + 'mouseleave:' + e.target.id+'<br/>'); }); }); </script>

- 화살표 방향으로 통과 시킨결과 대상 요소의 것만 적용

B. mouseover/mouseout

<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Title</title> <style> #outer{ postition : absolute; margin:0 auto; top:0; left:0; right:0; bottom:0; width:200px; height:200px; border: 1px solid black; } #inner{ postition : absolute; margin:0 auto; top:0; left:0; right:0; bottom:0; width:100px; height:100px; border: 1px solid black; } #result{ postition : absolute; margin:0 auto; top:0; left:0; right:0; bottom:0; width:200px; height:200px; } </style> </head> <div id="outer"> outer <div id="inner"> inner </div> </div> <div id="result"></div> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script> $(function(){ $('#outer') .mouseover(function(e){ $('#result').html($('#result').html() + 'mouseover:' + e.target.id+'<br/>'); }) .mouseout(function(e){ $('#result').html($('#result').html() + 'mouseout:' + e.target.id+'<br/>'); }); }); </script>

- 화살표 방향으로 통화 시킨결과 모든 요소(중첩되는) 동작

'Front-End > jQuery' 카테고리의 다른 글

[jQuery] 첫 번째 이벤트만 실행 - one() (0)	2017.01.06
[jQuery] 요소 마우스 들고 나는 시점 처리 - hover() (0)	2017.01.05
[jQuery] 표준 요소를 jQuery 객체로 변환 - $() (0)	2017.01.04
[jQuery] 요소 내용 삭제/비우기 - remove(), empty() (0)	2017.01.04
[jQuery] 기존의 요소 변경 - replaceAll(), replaceWith() (0)	2017.01.04

리딩리드

일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30