이벤트

이벤트의 기본 요소

• 이벤트
  • 특정 상황에 일어나는 사건
• 이벤트 타겟
  • 이벤트가 일어날 객체
• 이벤트 타입
  • 이벤트의 종류
• 이벤트 핸들러
  • 이벤트가 발생시 동작하는 코드

이벤트 등록 방법

• 인라인 (inline) 방식
  • onclick같은 속성에 javascript 코드를 직접 등록하는 방식
  • 바람직한 방법은 아니다.
  • 사용 예시

        <input type="button" onclick="alert('event '+this.value);" value="test" />
        

• 프로퍼티 리스너 방식
  • 이벤트 대상에 해당하는 객체의 프로퍼티로 이벤트를 등록하는 방식
  • 사용 예시

        <input type="button" id="propertyListenerTest" value="propertyListenerTest" />

        var target = document.getElementById('propertyListenerTest');
            target.onclick = function(event){
            alert('propertyListenerTest success, event.target.value : ' + event.target.value);
        }
        

• addEventListener 방식
  • 객체에 특정 상황에 대한 이벤트를 등록하는 방식
  • 사용 예시

        <input type="button" id="addListenerTest" value="propertyListenerTest" />

        var target = document.getElementById('addListenerTest');

        //방법 1
        fucntion whatever(event){ alert('addEventListenerTest success, '+event.target.value); }
        target.addEventListener('click', whatever);

        //방법 2
        target.addEventListener('click', function(event){
            alert('addEventListenerTest success, '+event.target.value);
        });
        

주의점

방법 1에서 함수명을 명시할때 [ 함수명() ]가 아니라 [ 함수명 ]로 적어야지 맞는 방식이다.
왜냐하면 ()를 붙이면 바로 호출해버리기 때문에 우리가 원하는 이벤트때 호출되는게 아닌
홈페이지 로드시 바로 호출되버리기 때문이다.

이벤트 전파 방법

• 캡처링 (capturing)
  • 이벤트가 부모에서부터 발생해서 자식으로 전파되는 방식
• 버블링 (bubbling)
  • 이벤트가 자식으로부터 발생해서 부모로 전파되는 방식

기본 동작의 취소

• 인라인 방식
  • 리턴 값이 false일 경우 취소
• 프로퍼티 리스너 방식
  • 리턴 값이 false일 경우 취소
• addEventListener 방식
  • 이벤트객체명.preventDefault() 실행시 취소

이벤트의 타입

• UI 이벤트
• 키보드 이벤트
• 마우스 이벤트
• 포커스 이벤트
• 폼 이벤트

UI 이벤트

• load
  • 웹 페이지 로드의 완료
• unload
  • 웹 페이지 언로드 (새로운 페이지 요청)
• error
  • 브라우저가 자바스크립트 오류를 만남
  • 브라우저가 요청한 자원이 없는 경우
• resize
  • 브라우저의 창 크기를 조정
• scroll
  • 사용자가 페이지를 위아래로 스크롤

키보드 이벤트

• keydown
  • 사용자가 키를 처음 눌렀을 때
• keyup
  • 사용자가 키보드의 키를 눌렀다가 땠을 때
• keypress
  • 사용자가 눌렀던 키의 문자가 입력되었을 때

※ 특수 키 사용시의 프로퍼티 : event.shiftKey, event.altKey, event.ctrlKey

마우스 이벤트

• click
  • 사용자가 마우스로 클릭할 때
• dbclick
  • 사용자가 마우스로 더블 클릭할 때
• mousedown
  • 사용자가 마우스를 계속 누르고 있을 때
• mouseup
  • 사용자가 누르고 있던 마우스 버튼을 땔 때
• mousemove
  • 사용자가 마우스를 움직였을 때
• mouseover
  • 사용자가 요소의 위로 마우스를 움직였을 때
• mouseout
  • 사용자가 요소의 바깥으로 마우스를 움직였을 때
• contextmenu
  • 사용자가 우클릭으로 메뉴를 열 때

※ 마우스 포인터의 위치 : clientX, clientY

포커스 이벤트

• focus
  • 요소가 포커스를 얻었을 때
• blur
  • 요소가 포커스를 잃었을 때

폼 이벤트

• input
  • input 태그나 textarea 태그의 요소 값이 변경되었을 때
• change
  • 선택 상자나 체크박스나 라디오 버튼의 상태가 변경되었을 때
• submit
  • 사용자가 버튼키를 이용하여 폼을 제출할 때
• reset
  • 리셋 버튼을 클릭할 때
• cut
  • 폼 필드의 내용을 잘라낼 때
• copy
  • 폼 필드의 내용을 복사할 때
• paste
  • 폼 필드의 내용을 붙여넣을 때
• select
  • 해당 텍스트를 선택했을 때

드래그 앤 드롭 이벤트

• dragstart
  • 요소나 텍스트 블록을 드래그 할 때
• drag
  • 드래그를 끝냈을 때
• dragend
  • 드래그를 끝냈을 때
• dragenter
  • 드래그한 요소나 텍스트 블록을 적합한 드롭 대상위에 올라갔을 때
• dragexit
  • 요소가 더 이상 드래그의 직접적인 대상이 아닐 때
• dragover
  • 요소나 텍스트 블록을 적합한 드롭 대상 위로 지나갈 때
• dragleave
  • 드래그하는 요소나 텍스트 블록이 적합한 드롭 대상에서 벗어났을 때
• drop
  • 요소를 적합한 드롭 대상에 드롭했을 때