[펌]jQuery in Action 정리 4장 - 이벤트 -모든것의 시작

jQuery in Action 정리 4장 - 이벤트 -모든것의 시작

|

jQuery

2010.12.29 14:40

• 말머리없음

행복한사람(totore98)

http://cafe.naver.com/plug/235

4.1 브라우저 이벤트 모델 이해하기

4.1.1 DOM 레벨 0 이벤트 모델

• 어트리뷰트 방식으로 DOMM 레벨 0 이벤트 헨들러를 선언하는 방법은 1.2 절에서 설명한 튀지않는 자바스크립트 원칙을 위반한다.
• Event 인스턴스의 프로퍼티는 발생한 이벤트에 관한 많은 정보를 제공한다. 엘리먼트 마우스이벤트 좌표, 키보드 이벤트의 키 정보 등
• 이벤트 버블링. 먼저 대상이 되는 엘리먼트에게 이를 전달한 뒤, 조상 엘리먼트에게 순서대로 이벤트를 전달하는 과정. 이걸 멈출 수 있나?
• 표준 호환 브라우져에서는 stopPropagation()메서드, IE에서는 cancleBubble프로퍼티

4.1.2. DOM 레벨 2 이벤트 모델

• 프로퍼티에 저장하는 레벨 0 방식은 두가지 동작 처리 안됨
• 레벨 2에서는 하나이상 할당하도록 설계
• addEventListener(eventType, listener, useCapture) 메서드를 사용
• 이벤트 버블링. 루트에서 대상 엘리먼트로 전파(캡쳐단계), 다시 대상엘리먼트에서 루트로 전파(버블단계)
• useCapture 매개변수를 false로 설정하면 버블 헨들러, true로 하면 캡쳐 헨들러
• ie는 캡쳐단계 지원 안함

4.1.3 인터넷 익스플로러 이벤트 모델

• ie 7에서도 DOM 레벨 2를 지원하지 않음
• ie는 attachEvent(eventName, handler)라는 비슷한 것을 지원
• jQuery를 통해 이런 브라우저간 차이를 해결

4.2 jQuery 이벤트 모델

• 이벤트 핸들러를 할당할 수 있는 통합 메서드 제공
• 엘리먼트 이벤트 타입마다 여러 헨들러 할당 가능
• click, mouseover 같은 표준 이벤트 타입 사용
• 핸들러 매개변수를 써서 Event 인스턴스를 사용
• 자주 사용하는 Event 인스턴스의 프로퍼티들에 일관된 이름을 사용
• 이벤트 해제와 기본행동을 막는 통합메서드 제공
• 캡쳐단계는 지원하지 않음

4.2.1 jQuery를 사용해 이벤트 핸들러 바인딩하기

• $('img').bind('click', function(event){alert('안녕!');});
• eventTypeName - blur, change, click, dblclick, error, focus, keydown, keypress, keyup, load, mousedown, mousemove, mouseout, mouseover, mouseup, resize, scroll, select, submit, unload
• .one() - 한번 실행 뒤 자동 삭제되는 핸들러

4.2.2 이벤트 핸들러 제거하기

• .unbind(eventType, listenner)
• .unbind(event)

4.2.3 Event 인스턴스

4.2.4 이벤트 전파 제어하기

4.2.5 이벤트 핸들러 호출하기

• .trigger(eventType) - 일치된 엘리먼트에 대하여 전달된 이벤트 타입에 해당하는 이벤트 핸들러를 모두 실행한다. 단, 이벤트를 발생 시키지 않으며 전파 안됨
• .blur(), .click(), .focus(), .select(), .submit() 등을 지원

4.2.6 그 외 이벤트 관련 커맨드

• 리스너 토글하기 - toggle(listenerOdd, listenerEven) 번갈아 가면서 실행될 클릭 이벤트 핸들러 한쌍을 할당
• 엘리먼트 위에서 맴돌기 - hover(overListener, outListener) 자식 엘리먼트로 이동은 무시됨
• $('#outer2').hover(report, report);

4.3 이벤트 사용하기

• HTML에는 화면을 꾸미는 정보는 담지 않는다. CSS로 정의
• HTML에는 스크리브로 포함하지 않는다 (튀지않는 자바스크립트원칙)