select
원문 링크 
http://api.jquery.com/select/
개요 : "select" JavaScript 이벤트를 바인딩 하거나 요소에 발생시킵니다.
- .select( handler(eventObject) )
- handler(eventObject) 이벤트가 발생하면 실행될 기능.
- .select( [eventData], handler(eventObject) )
- eventData 이벤트 핸들러에 전달될 데이터 맵.
- handler(eventObject) ) 이벤트가 발생하면 실행될 기능.
- .select()
이 함수의 첫번째, 두번째 용법은 .bind('select', handler) 를 줄여 표현한 것이고 세번째 용법은 .trigger('select') 를 줄여 표현한 것입니다.
scroll 이벤트는 유저가 텍스트를 선택하면 발생합니다. 이것은 <input type="text"> 필드와 <textarea> 박스에서 발생합니다. 또한 스크롤이 가능한 프레임이나 overflow CSS 속성이 있는 요소의 scroll (또는 auto 속성) 에서도 발생합니다..
아래 HTML 을 예로 보겠습니다.
<form> <input id="target" type="text" value="Hello there" /> </form> <div id="other"> Trigger the handler </div>
text input에 이벤트 핸들러를 바인딩 할 수 있습니다.
scroll 이벤트 핸들러는 아래처럼 요소에도 바인딩할 수 있습니다.
$('#target').select(function() {
alert('Handler for .select() called.');
});텍스트의 일부를 선택하면 알림창이 나타납니다. 이벤트를 수동으로 발생시키기 위해서는 .select() 함수를 인자없이 바인딩해야 합니다.
$('#other').click(function() {
$('#target').select();
});이 코드가 실행되면 Trigger 버튼을 클릭해도 알림창이 나타나게 됩니다.
추가적으로 select 이벤트는 텍스트를 선택할 수 있는 text 필드에서 발생합니다.
현재 선택된 텍스트를 검색하는 방법은 브라우져 별로 조금 상이합니다. jQuery의 플러그인을 사용하면 크로스 브라우징을 구현할 수 있습니다.
예 제
input 박스에 텍스트를 선택하면 어떤일이 발생하는지 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
p { color:blue; }
div { color:red; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>
Click and drag the mouse to select text in the inputs.
</p>
<input type="text" value="Some text" />
<input type="text" value="to test on" />
<div></div>
<script>
$(":input").select( function () {
$("div").text("Something was selected").show().fadeOut(1000);
});
</script>
</body>
</html>미리보기
텍스트를 드래그해서 선택해 보세요.
예 제
모든 input 요소에 select 이벤트를 바인딩 합니다.
$("input").select();
콤보박스의 select와는 다릅니다. 혼동하지 마세요.
그럼 즐프하세요.
※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.
'프로그래밍 > jQuery' 카테고리의 다른 글
| triggerHandler(), 하나의 함수만 실행시키기 (0) | 2012.03.20 |
|---|---|
| trigger(), 함수 실행시키기 (0) | 2012.03.20 |
| toggle(), 토글하기 (0) | 2012.03.09 |
| submit(), 폼 전송 이벤트 (1) | 2012.03.09 |
| scroll(), 스크롤 이벤트 (3) | 2012.03.06 |
| resize(), 사이즈 바꾸기 (0) | 2012.03.06 |
| ready(), 문서가 준비되면 실행하기 (0) | 2012.03.06 |
| one(), 이벤트 발생하면 바인딩 자동해제 (0) | 2012.02.24 |