[CookBook] 이벤트 다루기





Chapter 7. 이벤트 다루기





DOM Level 1, DOM Level 2 이벤트 할당 방식.





참고 사이트:

        

DOM Level 1 Event Model

http://mohwaproject.tistory.com/entry/dom-event-1

        

Dom Level 2 Event Model

http://mohwaproject.tistory.com/entry/dom-event-4





1. 페이지를 완전히 읽어 들인 순간을 탐지하기






2. 이벤트 객체를 사용해서 마우스가 클릭된 위치 캡처하기







참고 사이트:


자바스크립트 Dimension (Screen, Viewport, Scroll, Element, Mouse Event)

http: //mohwaproject.tistory.com/entry/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-Dimension-Screen-Viewport-Scroll-Element-Mouse-Event





3. 이벤트 삭제하기









4. 기본 이벤트 막기

   


보통 폼(Form or A(앵커)) 엘리먼트와 같이 기본 동작(Submit)이 할당된 엘리먼트는 해당 이벤트 시 다른 이벤트로 전파되기 전에 기본으로 할당된 이벤트를 취소해야 한다.







참고 사이트:


엘리먼트의 기본 동작 막기:

http: //mohwaproject.tistory.com/entry/dom-event-3






5. 중첩된 요소로 이벤트 전파 방지하기










참고 사이트:


Event Bubbling or Capture 이란?

http://mohwaproject.tistory.com/entry/dom-event-bubbling-capture%EC%97%90-%EB%8C%80%ED%95%98%EC%97%AC






6. 키보드 동작 핸들링 하기



ketCode or charCode 속성:

        

keyCode: IE or 오페라(사파리, 파폭, 크롬 또한 keyCode 속성을 지원하지만 keyCode 속성만 지원하는 브라우저(IE or 오페라)와 반환되는 keyCode가 일치하지 않는다.)

charCode: 사파리, 파폭, 크롬

        

        

키보드 이벤트 설명:

        

e.keydown: 키가 눌렸을때(모든 키에 반응한다.)

e.keyup: 키가 올라올때(모든 키에 반응한다.)

e.keypress: keydown 다음(단 문자(Enter 키 제외)를 입력했을때만 반응한다. 즉, Ctrl, Shift 키에서는 반응하지 않는다.)








7. HTML5 드래그 앤 드롭 사용하기



이 내용과 같은 경우 이전에 정리한 포스트 내용으로 대체 한다.




참고 사이트:


HTML5 File API 구현

http: //mohwaproject.tistory.com/entry/HTML5-File-API-%EA%B5%AC%ED%98%84