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

[jQuery] 이벤트 발생시 키 정보 - altKey, ctrlKey, shiftKey, which

Front-End/jQuery 2017. 1. 6. 17:05

이벤트 발생시 키 정보 - altKey, ctrlKey, shiftKey, which

1. 정보

속성	개요
altKey	alt키 눌렸는가
ctrlKey	ctrl키 눌렸는가
shiftKey	shift키 눌렸는가
which	키 코드의 종류

2. 예제

<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Title</title> <style> </style> </head> <form> <input type="text" id="which" size="10"/> </form> <p>entering : <span id="key"></span></p> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script> $(function(){ $('#which').keydown(function(e){ $('#key').text(e.which); }) ; }); </script>

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

[jQuery] 드래그 & 드랍 구현 - on()[이벤트리스너] (0)	2017.01.12
[jQuery] 이벤트 리스너에 매개변수 전달 (0)	2017.01.06
[jQuery] 이벤트 발생 시 마우스 정보 - screenX, screenY, pageX, pageY, clienX, clientY, offsetX, offsetY (0)	2017.01.06
[jQuery] 여러개의 이벤트 리스너 한 번에 설정 - on() (0)	2017.01.06
[jQuery] 동적으로 추가되는 요소의 이벤트 리스너 등록 - on() (0)	2017.01.06

리딩리드

,

[jQuery] 이벤트 발생 시 마우스 정보 - screenX, screenY, pageX, pageY, clienX, clientY, offsetX, offsetY

Front-End/jQuery 2017. 1. 6. 16:55

이벤트 발생 시 마우스 정보 - screenX, screenY, pageX, pageY, clienX, clientY, offsetX, offsetY

1. 정의

속성	개요
screenX	스크린 상의 x 좌표
screenY	스크린 상의 Y 좌표
pageX	페이지 상의 x 좌표
pageY	페이지 상의 y좌표
clientX	표시 영역 상의 x 좌표
clientY	표시 영역 상의 Y좌표
offsetX	요소 영역 상의 x좌표
offsetY	요소 영역 상의 y좌표

2. 예제

<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Title</title> <style> </style> </head> <div id="outer" style="position:absolute; maring: 50px; top:30px; left:30px; width:300px; height:300px; border : solid 1px black"></div> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script> $('#outer').on('mousemove', function(e){ $(this).html( 'screen:' + e.screenX + '/' + e.screenY + '<br/>'+ 'page:' + e.pageX + '/' + e.pageY + '<br/>'+ 'client' + e.clientX + '/' + e.clientY + '<br/>'+ 'offset' + e.offsetX + '/' + e.offsetY + '<br/>' ); }); </script>

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

[jQuery] 이벤트 리스너에 매개변수 전달 (0)	2017.01.06
[jQuery] 이벤트 발생시 키 정보 - altKey, ctrlKey, shiftKey, which (0)	2017.01.06
[jQuery] 여러개의 이벤트 리스너 한 번에 설정 - on() (0)	2017.01.06
[jQuery] 동적으로 추가되는 요소의 이벤트 리스너 등록 - on() (0)	2017.01.06
[jQuery] 표준이벤트가 아닌 이벤트 포착 - on() (0)	2017.01.06

리딩리드

,

[jQuery] 여러개의 이벤트 리스너 한 번에 설정 - on()

Front-End/jQuery 2017. 1. 6. 15:48

여러개의 이벤트 리스너 한 번에 설정 - on()

1. 방법

1) 구문

- on 메소드에 '이벤트명 : 값' 을 이용하여 여러개 셋팅이 가능하다

2) 예

<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Title</title> <style> #outer{ border : 1px solid black; width: 400px; height :400px; } </style> </head> <div id="outer"></div> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script> $('#outer').on({ 'mouseenter': function(e) { $(this).css('border-color','red'); }, 'mouseleave':function (e) { $(this).css('border-color','black'); }, 'click':function(e){ $(this).css('background-color','blue'); } }); </script>

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

[jQuery] 이벤트 발생시 키 정보 - altKey, ctrlKey, shiftKey, which (0)	2017.01.06
[jQuery] 이벤트 발생 시 마우스 정보 - screenX, screenY, pageX, pageY, clienX, clientY, offsetX, offsetY (0)	2017.01.06
[jQuery] 동적으로 추가되는 요소의 이벤트 리스너 등록 - on() (0)	2017.01.06
[jQuery] 표준이벤트가 아닌 이벤트 포착 - on() (0)	2017.01.06
[jQuery] 첫 번째 이벤트만 실행 - one() (0)	2017.01.06

리딩리드

,

[jQuery] 동적으로 추가되는 요소의 이벤트 리스너 등록 - on()

Front-End/jQuery 2017. 1. 6. 15:25

동적으로 추가되는 요소의 이벤트 리스너 등록 - on()

- on()을 이용하여 요소에 이벤트 리스너를 등록 할 수 있다

1. 방법

1) 구문

$('셀렉터').on('이벤트명', '자식 셀렉터', function(){...});

- 대상이 되는 요소 각각의 이벤트 리스너 생성

2) 예제

<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Title</title> <style> </style> </head> <p>Click me!</p> <span></span> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script> var count = 0; $( "body" ).on( "click", "p", function() { $( this ).after( "<p>Another paragraph! " + (++count) + "</p>" ); }); </script>

- 문제는 종종 동적으로 추가가 안될 때가 있다.

- 추가하려는 요소가 이미 존재해야 가능.

2. 다른 구문과의 비교

1) 다른 구문

$('셀렉터 자식셀렉터').on('이벤트명', function(e) {...});

- 수십, 수백개의 테이블의 각 셀에 대한 이벤트 리스너를 등록하는 것은 이것이 낫다

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

[jQuery] 이벤트 발생 시 마우스 정보 - screenX, screenY, pageX, pageY, clienX, clientY, offsetX, offsetY (0)	2017.01.06
[jQuery] 여러개의 이벤트 리스너 한 번에 설정 - on() (0)	2017.01.06
[jQuery] 표준이벤트가 아닌 이벤트 포착 - on() (0)	2017.01.06
[jQuery] 첫 번째 이벤트만 실행 - one() (0)	2017.01.06
[jQuery] 요소 마우스 들고 나는 시점 처리 - hover() (0)	2017.01.05

리딩리드

,

일	월	화	수	목	금	토
			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] 이벤트 발생시 키 정보 - altKey, ctrlKey, shiftKey, which

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

[jQuery] 이벤트 발생 시 마우스 정보 - screenX, screenY, pageX, pageY, clienX, clientY, offsetX, offsetY

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

[jQuery] 여러개의 이벤트 리스너 한 번에 설정 - on()

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

[jQuery] 동적으로 추가되는 요소의 이벤트 리스너 등록 - on()

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

공지사항

카테고리

태그목록

글 보관함

달력

링크

리딩리드

LATEST FROM OUR BLOG

LATEST COMMENTS

BLOG VISITORS

티스토리툴바