예제 9-8 코드 중
document.body.addEventListener("click", capture, true); // 켭쳐 단계(1)
// 타겟 객체에 버블 리스너 등록
button.addEventListener("click", bubble, false); // 버블 단계(2)
// body 객체에 버블 리스너 등록
document.body.addEventListener("click", bubble, false); // 버블 단계(3)
이 있는데요.
여기서 body 앞에는 document. 이 붙고
button 앞에는 document. 이 안 붙는데
어떤 경우에 document. 을 붙여야 하는건가요??
var button = document.getElementById("button");
그래서 다음 코드는 button 변수가 가리키는 DOM 객체의 멤버 함수 addEventListener()를 호출하는 코드입니다.
button.addEventListener("click", bubble, false); // 버블 단계(2)
2. body 앞에 document가 붙은 것은 다음과 같은 이유입니다.
책 352페이지의그림 8-4를 참고하세요. body객체는 document 객체의 자식입니다.
브라우저가 웹 페이지를 적재하면 그림 8-4의 모양이 되는 것이기 때문에, 그것을 그냥 받아들이고 이해해야 합니다.
그래서, body 객체를 액세스하려면 document.body라는 방식으로 표현합니다.
그림 8-4에 등장하는 모든 것들이 다 DOM 객체입니다.
모든 DOM 객체는 공통적으로 챌책 353페이지~354페이지의 요소들을 가지고, 표 8-1의 프로퍼티들(멤버 변수들)과 표8-2의 메소드(멤버 함수)들을 가집니다.
표 8-2에 보면 addEventListener() 메소드가 있는데
document.body.addEventListener("click", bubble, false); 은 이것을 호출하는 코드입니다.
3. 그래서
button.addEventListener("click", bubble, false); // 버블 단계(2)
---> 이코드를 다음과 같이 해도 됩니다.
document.getElementById("button").addEventListener("click", bubble, false); // 버블 단계(2)