IE 브라우저 및 Firefox_javascript 기술에서의 javascript 버블링 이벤트 응답 수준에 대해

페이지에 다음과 같은 태그가 있다고 가정합니다.

코드 복사 코드는 다음과 같습니다.

　

🎜>

이제 페이지에 다음 스크립트를 추가하세요.

코드를 복사하세요. 코드는 다음과 같습니다.

< ;script type="text/javascript">

window.onload=function(){ //각 레벨의 요소에 이벤트 바인딩
window.onclick= func;
document.onclick=func;
document.getElementById("timeDiv").onclick=func;
document.body.onclick=func; //응답 함수, 응답 출력
　document.getElementById("timeDiv").innerHTML =this "
"
}


firefox에서 페이지를 열고 IE 8, testDiv 태그에서(회색 사각형 클릭) 결과는 다음과 같습니다.

　
firefox 결과

IE 8의 결과
보시다시피 둘의 결과는 같지 않나요? 정확히 왜 이런 일이 일어나는 걸까요?

이 문제는 IE와 Firefox에서 버블링 이벤트에 대한 지원 수준이 다르기 때문에 발생하는 것으로 나타났습니다. (버블링 이벤트에 대해 잘 모르시는 분들은 먼저 관련 내용을 확인해보시면 됩니다.)

(1) IE 6 이후 버전에서는 버블링 이벤트가 지원되는 레벨이 문서 객체까지 도달합니다.

(2) Firefox(정확히 말하면 Mozilla 1.0 이상)에서는 버블링 이벤트에 대한 지원이 window 객체까지 확장되었습니다.

결과적으로 위의 이벤트 응답 결과가 달라졌습니다.

그리고 흥미로운 점이 있는데, 혹시 눈치채셨나요? 이벤트 대상의 응답 순서입니다. (버블링 이벤트의 응답 순서는... 약간 말도 안되는 것 같습니다.) 우리는 Firefox가 동시에 두 가지 이벤트 모델, 즉 이벤트 캡처와 버블링 이벤트를 지원한다는 것을 알고 있습니다. 여기서는 이벤트 처리 기능이 버블링 단계에서 작동한다는 것이 분명합니다. 즉, 이벤트 핸들러 함수 속성에 값을 직접 할당하는 전통적인 방법을 사용한다면 다음과 같습니다.




코드 복사

코드는 다음과 같습니다. document.body.onclick=func;

이벤트 핸들러는 이벤트 버블링 단계에 추가됩니다.

위는 IE와 Firefox의 버블링 이벤트 응답 수준에 대한 소개와 동시에 기존 이벤트 처리 기능의 직접 할당에 대한 기본 처리도 소개합니다. 자세한 설명은 Nicholas C. Zakas가 작성한 "Javascript Advanced 프로그래밍"을 참조하세요.

PS: 위 내용은 개인적인 독서노트일 뿐입니다. 오류나 누락이 있으면 지적해 주시기 바랍니다. 동시에 더 많은 프런트엔드 애호가들이 여러분의 경험을 공유할 수 있기를 바랍니다!