스크립트 이벤트 (on~)

2008년 4월 28일 포스팅

/////////////////////////////////////////

업무 중...구축한 내용에 대해 3D로 구현하라는 과제가 떨어졌다. 열씨미 이래저래 해서 완성~!

하라는걸 다 햇다지만... 근데 왠지 썰렁하다.

 페이지 상에 자그마한 텍스트 박스를 만들고 그 곳에 화면 상황이 변할 때 마다 그 상태를 출력 하는 기능을 넣고 싶었다. (호기심은 발전의 원동력! ㅋㅋ)

 

일단 새로운 스크립트 function 입력!

function now_value()
{
    var now=M1.M.ca;
    document.all.show.value=now;

}

조아써.. M1.M.ca 라는 곳에서 now 값을 받는거야~ 그리고.. now의 값을 show에다가 보여줘!! 

텍스트 박스 생성!!

 <input type="text" size="5" name="show" value="" onclick="now_value()"  />

오케이 실행!!!

....

...

.

젠장!! 안되잖아!!! 왜지? 왜냐구!....

....

아차.. onclick 이벤트를 썼다.. 텍스트 박스에 마우스 클릭을 하니까 보여진다...-_-ㅋ

내가 원하는 것은 이게 아닌데....;; 그냥 화면 변할때 마다 보여 지는 건데..

그럼.. onload !!

...

역시 안된다... 뭐 결국.. 위의 방법이 아닌 input 텍스트 박스에 id를 부여 함으로 해결 했지만..

on~어쩌고 저쩌고 이벤트 들이 재밌는거 같아서 몇가지 정리해 봐야 겠다.

 

이벤트 명령어와 설명.. 그리고 그 밑에는 알기 쉬운 활용 예를 적었다.

물론 쓰임새에 따라 무궁무진한 활용법이 있는 것들 이지만.. 알기쉬운 예를 한가지 씩만 익혀도 뭐..

 

---------------------------------------------------------------

onafterupdate : 데이터 원본이 성공적으로 업데이트 되면..

 - 음.. 뭐랄까.. 가장 흔한 예로 우리가 가입한 어느 사이트에서 개인정보 수정을 하였을때.. '성공적으로 저장 되었습니다' 라는 메세지를 호출하는데에 쓰이는 정도?

 

onbeforecopy : 선택된 내용이 클립보드(clipboard)에 복사되기 전

 - 쉽게 말해 컨트롤 + C 를 누르기 전에 경고 메세지를 보낸다.. 등에 쓰이지요~  '정말 복사 하시겠습니까?'

onbeforecut <-- 비슷한것으로, 복사 하기와 잘라내기의 차이

onbeforepaste <-- 요것은 붙여 넣을때..   

 

onblur : 마우스나 탭에 의해 이동 되었을 때

 - 흠.. 또 다시 개인정보 입력을 예로 들자면.. 회원 가입할때 아이디 입력하고 비번 입력하고..그러는 곳에서 탭키를 눌러 이동을 할때 제대로 입력 안하고 넘어가면 경고 메세지 호출 한다던가..(물론 다른 방법을 주로 사용.. 그 입력 칸 자체에 형식을 지정해서 첨부터 확인하는 방법) 그냥 이 이벤트가 그런 거다~ 라는 예일뿐!! ;;

onchange 는 위랑 비슷한데.. 입력칸의 내용이 '변경' 되었을때 발생~!

 

ondrag : 마우스를 드래그 하는 동안 계속해서 발생

 - 쉽게 말해 마우스로 아이콘을 드래그 하는 동안 그 아이콘 모양이 계속 마우스에 붙어 있는 것 같은 효과.. 랄까?

ondrop <-요건 드래그 한거 놓았을때.. 어딘가에 갖다 놓으면 복사 라던가 이동 이라던가의 기능이 일어나게 할 수 있겠지요~

 

onkeydown  : 키를 눌렀을 때 발생

 - 위의 마우스 클릭과 마찬가지로.. 키보드를 눌렀을때..  그리고..

onkeyup <- 요건 눌렀던 키를 놓았을 때 발동~

onkeypress <-요건 누르고 있으면 계속 발생..

위의 세가지는 게임을 예로 들어 설명하면 쉬울 듯.. 스킬을 쓰기 위해 단축키를 누르면 해당 스킬을 사용 할 수 있다. 바로 발사하는 스킬=(onkeydown), 주문을 외우기 위해 단축키를 누르고 있다.=(onkeypress), 주문을 외우다가  단축키에서 손을 떼면 마법을 발사 한다=(onkeyup) (게임 프로그래밍은 안해봤지만.. 실제로 이렇게 쓸듯...아니면 뭐..ㅋ)

 

onload  : 개체 로딩이 되었을 때

 - 흠.. 어딘가의 홈페이지가 열리면 팝업창이 뜬다~ 라는 기능으로 사용할 수있음. 가끔 첫 페이지로 돌아 갈때마다 자꾸 팝업창이 떠서 귀찮은 경험을 한 사람이 많을 것이라 여겨짐.. 다~ 요 명령어 때문 ㅋㅋ 물론 그런 팝업에는  '오늘 하루 다시 열지 않음' 이라는 기능을 적용해 주는 것이 기본!

 

onclick : 왼쪽 마우스로 클릭하였을 때

 - 이것은 마우스로 클릭 하면 나타나는 이벤트.. 가장 알기 쉽다. 그냥 클릭 하면 나타나게끔 만들어 주는 명령어..

ondblclick 요건 더블 클릭 했을때..

oncontextmenu 오른쪽 마우스를 클릭하였을 때..라는데.. 안해봤음..;;

onmousedown  <- 클릭과 마찬가지로 마우스로 누르면 나타나지만..클릭은 누른 상태로 마우스를 이동 하면 그곳이 클릭 되지 않는 것에 비해 이것은 누르자 마자 일어난다..누르고 있어도 이벤트는 계속 된다.

onmouseup <- 마우스버튼에서 손을 떼면 일어난다. (쉽게 말해 클릭(onclick)은 다운과 업이 동시에 이루어 져야만 실행 되는 명령어라고 생각 하면 된다.)

 

onmouseover, onmouseenter: 마우스가 개체 위로 이동하였을 때

 - 떠도는 플래쉬 애니메이션(?) 중 마우스를 플래쉬가 실행 되는 곳으로 가져가면 포인터를 잡아가버리는 귀여운 녀석을 본 적이 있는지..? 그런걸 생각하면 이해가 쉽지요~

onmousemove : 그 플래쉬에서 마우스가 이동하면 포인터를 잡으러 쫓아 오지요~

onmouseleave : 마우스를 해당 플래쉬에서 벗어나게 하면 애니메이션이 초기화가 되지요~? 

onmouseout : 마우스가 이탈하였을 때
onmousewheel : 마우스 휠이 회전할 때 발생(스크롤 내리고 올리고~)

<솔직히.. 위 명령어 중 마우스오버와 마우스엔터, 그리고 마우스리브와 마우스아웃의 세심한 차이는 아직 모르겠다..흑..여러모로 써보지 못한 허접한 실력..;;>

 

휴.. 이정도 정리만으로도 너무 힘들군..역시 포스팅이란..ㅜㅜ

위에 나열한 스크립트 이벤트 외에도 무궁무진한 on~어쩌고저쩌고가 많지만.. 정리하기 너무 힘들다..으읔.. 그리고..아직 다 써보지도 못했다..-_-;

 

음.. 다시한번 말하지만 위에 예를 든 것들은 아주 쉽게 설명해 보기 위해 쓴 것일 뿐.. 사용 방법은 정말 무궁 무진 하다는 거~!! (어거지로 예를 들었다거나 틀린 것이 없기만을 바랄 뿐..;;)

 

스크립트도 참... 재밌다~ ㅋ

 

P.S. 혹시 이곳을 보고 '이딴건 다 알어! 이건 너무 기초야!!' 라면서 더욱 많은 지식을 추구하는 분들!!

         스크립트에 대하여 방대한 정리를 해놓은 곳을 링크 해 놓겠으니 참고 하세요~

         < KoXo 자바스크립트 메뉴얼 :   http://koxo.com/lang/js/jsList.html >