'Front-End/jQuery' 카테고리의 글 목록 (4 Page)

[jQuery] 표준이벤트가 아닌 이벤트 포착 - on()

Front-End/jQuery 2017. 1. 6. 14:43

표준이벤트가 아닌 이벤트 포착 - on()

- on()을 이용하면 표준 이벤트가 아닌 이벤트를 포착할 수 있다

- error 표시에 사용

- 표준 이벤트들 또한 on으로 대처 할 수 있다

1. 방법

1) 예

<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Title</title> <style> </style> </head> <input type="button" class="photo" value="small" data-path="small"/> <input type="button" class="photo" value="medium" data-path="medium"/> <input type="button" class="photo" value="big" data-path="biga"/> <br/> <img sre="" id="result"/> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script> $(function(){ $('.photo').click(function(){ $('#result').attr('src',$(this).data('path')+'.png'); }); $('#result').on('error', function(){ $(this).attr('src','new.jpg'); }); }); </script>

- small 버튼 눌렀을 때, 정상

- 만약 big을 눌렀는데 해당 경로에 이미지 파일이 없다면( error)

- on()에 등록되어 있던 대체 이미지가 뜬다

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

[jQuery] 여러개의 이벤트 리스너 한 번에 설정 - on() (0)	2017.01.06
[jQuery] 동적으로 추가되는 요소의 이벤트 리스너 등록 - on() (0)	2017.01.06
[jQuery] 첫 번째 이벤트만 실행 - one() (0)	2017.01.06
[jQuery] 요소 마우스 들고 나는 시점 처리 - hover() (0)	2017.01.05
[jQuery] 제이쿼리 주요 이벤트 리스너와 예제 (0)	2017.01.05

리딩리드

,

[jQuery] 첫 번째 이벤트만 실행 - one()

Front-End/jQuery 2017. 1. 6. 14:14

첫 번째 이벤트만 실행 - one()

- 지정된 이벤트를 처음 한 번만 실행한다

- 두번 째 부턴 무시

1. 방법

<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Title</title> <style> </style> </head> <h1>Lucky number</h1> <input type="button" id="btn" value="To test your luck"/> <div id="result"></div> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script> $(function(){ $('#btn').one( 'click',//검출할 이벤트 function(){ $('#result').text(Math.round(Math.random() * 100)); } ) ; }); </script>

- click 이벤트를 검출한다

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

[jQuery] 동적으로 추가되는 요소의 이벤트 리스너 등록 - on() (0)	2017.01.06
[jQuery] 표준이벤트가 아닌 이벤트 포착 - on() (0)	2017.01.06
[jQuery] 요소 마우스 들고 나는 시점 처리 - hover() (0)	2017.01.05
[jQuery] 제이쿼리 주요 이벤트 리스너와 예제 (0)	2017.01.05
[jQuery] 표준 요소를 jQuery 객체로 변환 - $() (0)	2017.01.04

리딩리드

,

[jQuery] 요소 마우스 들고 나는 시점 처리 - hover()

Front-End/jQuery 2017. 1. 5. 17:52

요소 마우스 들고 나는 시점 처리 - hover()

- mouseenter(), mouseleave()로 처리 할 수 있지만 hover()를 사용하면 가독성이 좋아진다

- 두 함수를 합친 형태

1. 방법

1) 예제

<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Title</title> <style> #pic{ border : 1px solid black; width:200px; height:200px; } </style> </head> <div id="pic"> </div> <div id="result"></div> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script> $(function(){ $('#pic').hover( function(e){ $(this).append('<img src="nba.png" width="50px" height="50px"/>'); }, function(e){ $(this).empty(); } ); }); </script>

- 마우스가 위로 올라가면 그림이 나오고 마우스가 벗어나면 없어진다

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

[jQuery] 표준이벤트가 아닌 이벤트 포착 - on() (0)	2017.01.06
[jQuery] 첫 번째 이벤트만 실행 - one() (0)	2017.01.06
[jQuery] 제이쿼리 주요 이벤트 리스너와 예제 (0)	2017.01.05
[jQuery] 표준 요소를 jQuery 객체로 변환 - $() (0)	2017.01.04
[jQuery] 요소 내용 삭제/비우기 - remove(), empty() (0)	2017.01.04

리딩리드

,

[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	31

'Front-End/jQuery'에 해당되는 글 36건

[jQuery] 표준이벤트가 아닌 이벤트 포착 - on()

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

[jQuery] 첫 번째 이벤트만 실행 - one()

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

[jQuery] 요소 마우스 들고 나는 시점 처리 - hover()

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

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

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

공지사항

카테고리

태그목록

글 보관함

달력

링크

리딩리드

LATEST FROM OUR BLOG

LATEST COMMENTS

BLOG VISITORS

티스토리툴바