HTML을 읽어 들이는 타이밍에 실행되는 ready( )
'처리가 실행되는 계기'는 클릭 또는 마우스오버처럼 브라우저상에서 유저의 조작만 있는 것이 아님
"브라우저가 웹 페이지를 읽어 들이는 것이 끝났다"라는 것도 이벤트의 한 종류
$(function( ) { HTML을 읽어 들이고 실행하는 처리 }); |
다음 코드는 생략형
$(document).ready(function( ) { HTML을 읽어 들이고 실행하는 처리 }); |
ready( )는'HTML 로딩 완료'라는 이벤트를 감지하는 명령입니다
ready( )의 좌측에는 셀렉터를 $(document)와 같이 기술하여 '웹 페이지 전체'(document)를 대상하고 있다
따라서 $(function( ) { ... } )는 "웹 페이지를 모두 읽어 들이고 준비가 되었다면 처리하시오"라는 명령어의 생략형
ready( ... )의 괄호에는 function( ... )이라고 기술하고 그 안에는 실행하고 싶은 처리를 기술
괄호 안에 function( ){ ... }이라고 쓰는 것은 ready( )뿐만 아니라 이벤트를 감지하여 처리를 실행하는 경우에 모두 적용되는 사안
$( 셀렉터 ).이벤트(function( ) { $(셀렉터 ).명령 }); |
다른 이벤트 처리에도 ready( )는 필수 항목
ready( )는 이벤트를 감지하는 명령의 한 종류이지만, 또 다른 이벤트를 감지하고 싶은 경우에도 사용되며
$(function ( ) { ... } ) 안에 처리 내용을 기술
예를들어, 아래의 예제는 "button 태그가 클릭되었다면 처리를 실행한다."라는 스크립트입니다.
자세한 것은 뒤에 다시 이야기하겠지만,
click( )은 "특정 태그가 클릭되었다."라는 이벤트를 감지하는 명령
| $("botton").click(function( ) { button 태그가 클릭되었을 때 실행하는 처리 }); |
브라우저는 페이지 로딩이 아직 끝나지 않았기 때문에 button 태그의 존재를 발견할 수 없음
여기서 다음과 같이 스크립트 전체를 $(function( ) { ... }) 안에 기술
| $(function( ) { $("button").click(function( ) { button 태그가 클릭되었을 때 실행하는 처리 }); }); |
이것으로 브라우저는 script 태그의 위치에 관계없이 button 태그를 발견할 수 있고,
처리는 페이지 로딩이 완료된 후 실행 됨
$( function( ) { ... })를 사용하면 button 태그가 클릭된 타이밍에 실행하고 싶은 처리를 설정할 수 있음
제이쿼리를 사용하는 경우에는 항상 $( function( ) { ... })의 안에 스크립트를 기술한다는 것을
미리 기억해 두기!
click( )의 기본적인 작성법
click( )은 ready( )와 같이 괄호 안에 function( ) { ... }을 기술하고 그 안에 실행하고 싶은 처리를 기술
$(셀렉터).click(function( ) { 셀렉터로 지정한 태그가 클릭되었을 때 실행하는 처리 }); |
실무에서 자주 나타나는 함정
| a 태그에 설정한 click 이벤트 처리가 동작하지 않음! click( )은 셀렉터로 임의의 태그를 지정할 수 있지만, 클릭되며 href 속성에 링크되어 있는 곳으로 이동하는 a 태그를 지정하면 어떻게 될까요? 아래의 샘플을 실행해 보기!! <javascript> $(function( ) { $("a").click(function( ) { $("img").attr("src", "sea.jpg").attr("alt","바다"); }); }); <html> <a href = "sea.jpg">화면을 변경 </a> <p><img src = "flower.jpg" alt = "꽃"/></p> a 태그를 클릭하면 click 이벤트가 발생하고 제이쿼리의 명령이 실행됨 그렇지만 다음 순간 웹 브라우저는 a 태그의 href 속에 설정되어 있는 링크의 URL을 열어버림 이 문제를 피하는 방법은 몇 가지가 있다! < 방법 1 > javascript:void( 0 )를 사용한다. a 태그의 href 속성에 javascript:void( 0 )라고 설정하여 a 태그의 기능을 무효화하는 방법 < a href = "javascript:void( 0 )" > 화면을 변경 </a> <p><img sec = "flower.jpg" alt = "꽃" /></p> 그러나 이 방법은 유저가 javascript를 (사용안함)으로 설정한 경우에는 링크를 클릭해도 아무런 변화가 일어나지 않기 떄문에 좋은 방법이라고는 할 수 없음!!! < 방법 2 > return false;를 추가한다. click 이벤트의 마지막 부분에 return false;를 기술하는 방법 $(function( ) { $("a").click(function( ) { $("img").attr("src", "sea.jpg").attr("alt","바다"); return false; }); }); < a href = "javascript:void( 0 )" > 화면을 변경 </a> <p><img src = "flower.jpg" alt ="꽃"/></p> 위 경우에도 a 태그가 클릭되었을 때는 제이쿼리 명령만 실행되고 href 속성에 설정된 링크로는 이동하지 않음 한편 자바스크립트가 < 사용 안함 >으로 설정되어 있는 경우는 a 태그의 링크가 유효해지기 때문에 제이쿼리 명령으로지정하고 있는 내용에 가까운 url을 href 속성에 설정해 두면 유저는 최소한의 정보를 얻을 수 있게 됨 |
더블 클릭 이벤트를 감지하는 dbclick( )
특정 태그가 더블 클릭되었을 때 어떤 처리를 실행하고 싶을 경우 dbclick( )을 사용
$(셀렉터).dbclick(function( ) {
셀렉터로 지정한 태그가 더블 클릭되었을 때 실행하는 처리
});
마우스의 버튼 조작을 감지하는 mousedown( ) / mouseup( )
특정 태그 위에 마우스의 특정 버튼이 눌렸다가 떨어질 때 처리를 실행
mousedown( )은 특정 태그 위에 마우스 포인터가 있는 상태에서 마우스 버튼의 눌렸을 경우 처리를 실행
$(셀렉터).mousedown(function( ) { 셀렉터로 지정한 태그에 마우스 버튼이 눌렸을 경우 실행할 처리 }); |
mouseup( )은 특정 태그 위에 마우스 포인터가 있는 상태에서 이미 눌렸 있던 버튼이 떨어지는
타이밍에 처리를 실행
$(셀렉터).mouseup( function( ){ 셀렉터로 지정한 태그 위에서 눌려 있던 마우스가 떨어질 때 실행하는 처리 }); |
클릭될 때마다 다른 처리를 실행하는 toggle( )
클릭될 때마다 다른 처리를 실행하고 싶은 경우에 편리하게 사용되는 것이 toogle( )
$( function( ) { $(셀렉터).toggle(function( ){ 처음 클릭되었을 때 실행할 처리 }, function( ) { 두 번째 클릭되었을 때 실행할 처리 }, function( ) { (중략...) }, function( ) { 마지막 클릭되었을 때 실행할 처리 }); }); |
마우스오버 / 마우스아웃을 감지하는 mouseover( ) / mouseout( )
특정 태그 위에 마우스가 겹쳐진 타이밍을 감지하여 처리를 실행
mouseover( )
특정 태그상에 마우스 포인터가 겹쳐졌을 경우 처리를 실행
$(셀렉터).mouseover( function( ) { 셀렉터로 지정한 태그에 마우스 포인터가 겹쳐졌을 경우에 실행하는 처리 }); |
mouseout( )
특정 태그 위에서 마우스 포인터가 태그 밖으로 벗어났을 경우철리를 실행
$(셀렉터).mouseout( function( ) { 셀렉터로 지정한 태그에 마우스 포인터가 벗어났을 경우에 실행하는 처리 } |
마우스의 움직임에 맞춰서 처리를 실행하는 mousemove( )
특정 태그 위에 마우스 포인터가 움직이는 경우에 처리를 실행
$(셀렉터).mousemove(function( ) { 셀렉터로 지정한 태그 위에서 마우스가 움지기고 있을 경우에 실행하는 처리 }) |
이벤트 발생시에 한 번만 처리를 실행하는 one( )
지정한 태그에서 발생한 이벤트에 대한 한 번만 실행되도록 하는 명령어가 one( )
$(셀렉터).one("이벤트 발생 조건", function( ) { 이벤트 발생시에 실행하는 처리 } |
설정되어 있는 이벤트 처리를 취소하는 unbind( )
설정되어 있는 이벤트 처리를 취소하는 명령
| $(셀렉터).unbind("이벤트 발생 조건"); |
앞으로 추가될 태그에 이벤트 처리를 설정할 수 있는 live( )
실행한 시점에 존재하는 태그와 더불어 앞으로 추가될 태그에도 이벤트 처리를 설정할 수 있는 명령어
$(셀렉터).live("이벤트 발생 조건", function( ){ 실행하는 처리 }); |