4.1 브라우저 이벤트 모델 이해하기
모질라 기반의 브라우저 : 파이어폭스, 카미노
최신 표준 준수하는 브라우저 : 사파리, 오페라
인터넷 익스플로러 : 자체 표준이 있으며 자신만의 인터페이스를 사용
브라우저별로 인터페이스가 달라 발생하는 작업을 어떻게 처리해줄 것이냐.
4.1.1 DOM 레벨 0 이벤트 모델
$('#vstar')[0].onmouseover = function(event) {
onmouserover 에 대한 이벤트가 발생하면 해당 함수를 불러와서 실행한다.
Event 인스턴스
근데 이건 jQuery 에서만 있는게 아니라 javascript 자체적인 기능인거 같은데..
이벤트 버블링
부모까지 올라가면서 실행된다는 개념인데 얘도 javascript 개념인 것 같고..
이벤트 전파의 영향과 그 의미
이벤트 버블링을 막고 싶다면?
stopPropagation()을 호출. - 표준 호환 브라우저의 경우
인터넷 익스플로러에서는 cancelBubble을 호출
form 엘리먼트의 경우 return false를 호출하여 submit을 막을 수 있다.
<form name="myForm" onsubmit="return false;">
4.1.2 DOM 레벨 2 이벤트 모델
DOM 레벨 0 에서는 이벤트 당 핸들러를 하나씩 밖에 할당 못했다.
DOM 레벨 2에서는 해결했다.
이벤트를 하나 이상 할당하는 방법을 알아보면..
이벤트 할당하기
addEventListener(eventType, listener, useCapture)
- eventType : 처리할 이벤트 on을 뺀것.. (click, mouseover, keydown등…)
- listener : 핸들러로 할당할 함수의 참조.. (인라인 함수도 됨)
- useCapture : 이벤트 전파를 얘기할 때 볼 것임.. 일단 false로 설정하기..
코드 예시
$(function(){
var element = $('#vstar')[0]; // element라는 변수에 아이디 값을 통해 엘리먼트를 찾아서 넣어준다.
element.addEventListener('click',function(event) { // 해당 엘리먼트를 불러와 거기에 리스너를 더해준다.
say('Whee once!');
},false);
element.addEventListener('click',function(event) {
say('Whee twice!');
},false);
element.addEventListener('click',function(event) {
say('Whee three times!');
},false);
});
위와 같이 구성하면 click이라는 이벤트에 3개의 함수를 붙여준것이 구현된다.
이벤트 전파 (useCapture)
캡처 단계와 버블 단계가 있는데 캡처 단계는 이벤트가 발생하면 해당 dom 루트 에서 엘리먼트로 전파하는 것. 버블 단계는 이벤트 처리 후 부모 엘리먼트로 올려보내는 것.
useCapture 속성을 true로 만들면 캡처 핸들러로 쓰겠다는 것이고 useCapture false로 만들면 버블 핸들러로 쓰겠다는 것이다.
4.1.3 인터넷 익스플로러 이벤트 모델
인터네 익스플로러에 대한 얘기인데.. 별로 중요하지 않은 거 같아서 생략