이벤트에 대해서 알아보겠습니다.

 

이벤트(event)란 모든 행위(?)를 말하는 것으로 프로그램에서는 미리 사용자의 행위를
예측하여 미리 사용할 수 있도록 이벤트를 많이 준비해 놓고 있습니다.

 

예를 들어 사용자가 마우스를 클릭합니다. 그러면 사용자가 클릭했다는 것을 알려줍니다. 클릭했을때 어떤 동작을 하기 위해서 click 이벤트가 준비되어 있습니다.


이게 없다면 우리는 사용자가 마우스를 클릭했는지 부터 알아내고 그 다음 작업을 할 수 있을 것입니다.

이것이 일종의 이벤트입니다.

 

 

이벤트 핸들러란 이벤트와 우리가 준비한 프로그램을 연결해 주는 역할을 합니다.

 

 

우리가 해야할 일은 이벤트가 일어났을 때 수행할 작업을 준비하고 이벤트 핸들러에게 그 일을 하도록 연결해 주면 됩니다.

 

 

 

이벤트와 이벤트 핸들러를 연결하는 방법을 간단하게 살펴보겠습니다.

기본적인 2가지 방법을 살펴볼텐데 첫번째는 태그에 직접 지정하는 방법과 두번쨰로 script 태그 안에서 지정하는 방법에 대해서 설명합니다.

 

tip으로 마우스 오른쪽 클릭 방지(마우스 우클릭 방지) 에 대해서도 설명합니다.

 

 

1. 태그에 직접 지정

 

 <태그명 ... on이벤트명(이벤트 종류) = "이벤트핸들러"> 내용 </태그명>
이곳의 이벤트핸들러 영역은 자바스크립트 영역과 같다.(이벤트핸들러 자리에 자바스크립트 언어사용가능)
   

1
2
<body onload="alert('안녕하세요');">
 
cs

 


 이벤트 핸들러의 내용이 복잡하거나 많으면 이 부분을 함수로 만들고
 이벤트 핸들러에서 이 함수를 호출하는 식으로 작성한다.

1
2
3
4
5
6
7
<body onload="insa();">
<script>
   function insa(){
     alert("반갑");
   }
</script>
 
cs

 

 

2. script태그 안에서 지정

 

1) 객체명.on이벤트명 = 함수명;

1
2
3
4
5
6
7
8
<script>
   window.onload = insa;
 
   function insa(){
    alert("반갑");
   }
</script>
 
cs


2) 객체명.on이벤트명 = function(){처리할 내용; ...}

1
2
3
4
5
6
<script>
   window.onload = function(){
      alert("반갑반갑");
   }
</script>
 
cs

 

 

 

 

tip : 마우스 오른쪽 클릭 방지하기, 마우스 우클릭 방지

마우스 오른쪽 클릭 방지하기는 생각보다 아주 간단하게 작성할 수 있습니다.

1
2
3
4
5
6
7
8
<script type="text/javascript">
    document.onmousedown = click;
    function click(){
        if(event.button == 2){
            alert("죄송합니다. \n 오른쪽 마우스는 사용할 수 없습니다.");
        }
    }
</script>
cs

2# : mousedown 이벤트를 활용합니다. 마우스를 누를 경우에 대한 이벤트 입니다. 마우스가 눌려졌을때 click 함수를 실행합니다.

4# : event 객체를 사용합니다. IE에서는 이벤트 핸들러에서 이벤트에 대한 정보를 가지고 있는 객체입니다. 누른 버튼의 종류에 따라 event.button에 다른 값이 저장됩니다. 1:왼쪽버튼, 2:오른쪽버튼, 4:가운데버튼

 

위와 같이 이벤트를 활용하여 마우스 오른쪽 클릭방지(마우스 우클릭 방지) 를 쉽게 구현할 수 있습니다.

 

 

 

 

 

아래는 이벤트 종류와 의미, 메서드, 속성 등의 대한 설명입니다.

 

■ 이벤트의 종류와 의미 (이벤트핸들러는 이벤트 앞에 on을 붙여 준다)

blur  포커스를 다른곳으로 옮길 경우
click 링크나 폼의 구성원을 클릭할 때
change 선택값을 바꿀 경우
focus 포커스가 위치할 경우
mouseover 마우스가 올라올 경우
mouseout 마우스가 떠날 경우
mousedown 마우스를 누를 경우
mousemove 마우스를 움직일 경우
mouseup 마우스를 눌렀다 놓을 경우
select  입력양식의 하나가 선택될 때
submit  폼을 전송하는 경우
load 페이지,윈도우가 브라우져로 읽혀질 때
unload 현재의 브라우저,윈도우를 떠날 때
error 문서나 이미지에서 에러를 만났을 때
reset 리셋 버튼이 눌렸을 때
dbclick 더블클릭시
dragdrop 마우스 누르고 움직일 경우
keydown 키 입력시
keypress 키 누를 때
keyup 키를 누르고 놓았을 때
move 윈도우나 프레임을 움직일 때
resize 윈도우나 프레임 사이즈를 움직일 때

 

 

■ 메서드

blur()  입력 포커스를 다른 곳으로 이동시킴
click() 마우스 버튼이 눌러진 것처럼 해줌
focus() 입력 포커스를 준 것처럼 해줌
submit() 폼의 submit 버튼을 누른 것처럼 해줌 
select() 메소드 폼의 특정 입력 필드를 선택함 

 

 

■ 속성

event.keyCode 누른 키의 ASCII 정수 값
event.x 문서 기준 누른 좌표의 left
event.y 문서 기준 누른 좌표의 top
event.clientX 문서 기준 누른 좌표의 left
event.clientY 문서 기준 누른 좌표의 top
event.screenX 콘테이너 기준 누른 좌표의 left
event.screenY 콘테이너 기준 누른 좌표의 top

 

 

■ 브라우저 객체별 이벤트 핸들러

선택 목록(SELECT) onBlur, onChange, onFocus
문자 필드(TEXT) onBlur, onChange, onFocus, onSelect 
문자 영역(TEXTAREA)  onBlur, onChange, onFocus, onSelect
버튼(BUTTON)  onClick 
체크박스(CHECKBOX) onClick 
라디오 버튼(RADID) onClick
링크 onClick, onMouseover
RESET 버튼(RESET) onClick
SUBMIT 버튼(BUTTON) onClick 
DOCUMENT onLoad, onUnload
WINDOW onLoad, onUnload 
폼(FORM) onSubmit

 

 

 

 

 

 

 

 

 

 

 

by 개발자 CofS 2016.05.02 10:11
  • dd 2016.10.04 15:56 ADDR EDIT/DEL REPLY

    정말 도움 많이되네요 감사합니다

  • 2017.05.21 22:25 ADDR EDIT/DEL REPLY

    비밀댓글입니다

    • Favicon of https://cofs.tistory.com BlogIcon 개발자 CofS 2017.05.22 11:44 신고 EDIT/DEL

      일단 5번 클릭하고 alert를 띄우는 함수는 이정도면 된거같아요 ㅎㅎ

      click5 라는 함수는 클릭하는 버튼이나 태그에 onclick 이벤트 등으로 호출 하시면 될거같아요 ㅎㅎ

      그런데 두번째 질문은 조금 이해가 안되네요 ㅠ 제가 지금정신이없어가지고 ...



      var clickCnt = 0;
      function click5(){
      clickCnt ++;
      if(clickCnt == 5){
      alert("You lost!");
      clickCnt = 0;
      }
      }

    • ㅠㅠ 2017.05.22 15:22 EDIT/DEL

      이게 랜덤으로 동그라미나 네모가 나오면 그걸 빠르게 누르는 게임인데요. 제가 원하는 대로 수정하려고, 원래 있던 게임 스크립트?를 긁어왔던 거였어요! 클릭 함수?를 어디에 넣냐에 따라 뭔가
      달라질까봐 어느 위치에 넣으면 좋을지
      여쭤본 거였어요.
      그냥 제일 아래에 클릭 함수?를 붙여 넣었는데 에러가 뜨네요! ㅠㅜ

      <body>
      <script type="text/javascript">
      document.onmouseup = click;
      function click5(){
      clickCnt ++;
      if(clickCnt == 5){
      alert("You lost!");
      clickCnt = 0;
      }
      }
      </script>
      </body>

      이렇게 붙여넣었는데 clickCnt++;
      아래에 Unexpected token ILLEGAL 라고 뜨는데 어떻게 수정해야 할지 아시나요ㅠㅜ

      도와주시면 감사하겠습니다!

    • Favicon of https://cofs.tistory.com BlogIcon 개발자 CofS 2017.05.22 15:33 신고 EDIT/DEL

      전역변수가 빠졌네요
      var clickCnt = 0;

      그리고 질문이 애매한게 클릭함수가 어떤 역할을 할지 모르는데 어느 위치에 넣어야 할지 알려달라는게 ...
      클릭함수는 5번 클릭시 alert를 띄워주는 일을 하는데 어디를 클릭했을때 해당 alert 를 띄울것인지 생각해보면되요
      그 녀석과 연결하세요 ㅎㅎ

      짐작하건데 기존소스는 그냥 빈 화면을 클릭했을데 이벤트를 발생하는거같네요
      즉 미스를 5번하면 alert를 띄우는건가 ?
      그렇다면 document.onmouseup = click; 이걸 document.onmouseup = click5; 로 바꾸세요 ㅎㅎ

    • 2017.05.22 20:40 EDIT/DEL

      비밀댓글입니다

    • 2017.05.22 20:42 EDIT/DEL

      비밀댓글입니다

    • Favicon of https://cofs.tistory.com BlogIcon 개발자 CofS 2017.05.23 10:00 신고 EDIT/DEL

      잘읽어보았습니다.

      연락하실 방법을 알려주시면 도와드리겠습니다.

    • 2017.05.23 17:46 EDIT/DEL

      비밀댓글입니다

    • Favicon of https://cofs.tistory.com BlogIcon 개발자 CofS 2017.05.23 17:56 신고 EDIT/DEL

      검색결과가 없다고 하네요 ㅜㅜ

    • 2017.05.23 18:13 EDIT/DEL

      비밀댓글입니다

    • Favicon of https://cofs.tistory.com BlogIcon 개발자 CofS 2017.05.24 13:18 신고 EDIT/DEL

      여전히 검색결과가 없네요 ;
      아이디 검색 허용을 체크해주셔야 할듯해요

    • 2017.05.25 16:27 EDIT/DEL

      비밀댓글입니다