1. 이벤트 흐름
이벤트 스트림은 페이지에서 이벤트를 수신하는 순서를 설명합니다. 그러나 IE는 버블 스트림을 제안하는 반면 Netscape Communicator는 캡처 스트림을 제안합니다.
JavaScript 이벤트 스트림
2. 이벤트 버블
이벤트는 가장 구체적인 요소 (가장 깊은 중첩 계층이있는 노드)에 의해 수신되기 시작한 다음, 덜 특정 노드 (문서)로 단계적으로 위로 전파됩니다. 다음과 같이 :
코드 사본은 다음과 같습니다.
<html>
<헤드>
<title> 이벤트 버블 링 </제목>
</head>
<body>
<div id = "mydiv"> me </div>를 클릭하십시오
</body>
</html>
Window.onload = function () {
var obj = document.getElementById ( "테스트");
obj.onclick = function () {
경고 (this.tagname);
};
document.body.onclick = function () {
경고 (this.tagname);
};
document.documentElement.onClick = function () {
경고 (this.tagname);
};
document.onclick = function () {
경고 ( "문서");
};
Window.onClick = function () {
경고 ( "창");
}
};
이벤트 전파 순서 : div-> body-> html-> 문서
알아채다:
모든 최신 브라우저는 버블 이벤트를 지원하지만 구현에는 약간의 차이가 있습니다. IE5.5 및 이전 버전의 이벤트 버블은 본문에서 문서로 직접 이동합니다 (HTML 실행 없음). Firefox, Chrome 및 Safari Bubble은 창 객체까지 이벤트합니다.
3. 이벤트 버블을 중지하고 기본 이벤트를 취소하십시오
에이. 이벤트 개체를 얻으십시오
코드 사본은 다음과 같습니다.
함수 getEvent (이벤트) {
// Window.event IE
// 이벤트 nonie
반환 이벤트 || Window.event;
}
B 기능 : 이벤트 거품을 중지하십시오
코드 사본은 다음과 같습니다.
함수 stopbubble (e) {
// 이벤트 객체가 제공되면 이것은 비 브라우저입니다.
if (e && e.stoppropagation) {
// 따라서 w3c의 stopPropagation () 메소드를 지원합니다
E.StopPropagation ();
} 또 다른 {
// 그렇지 않으면 이벤트 버블을 취소하려면 IE를 사용해야합니다.
Window.event.cancelBubble = true;
}
}
기음. 브라우저의 기본 동작을 차단하십시오
코드 사본은 다음과 같습니다.
함수 stopDefault (e) {
// 기본 브라우저 동작 블록 (W3C)
if (e && e.preventDefault) {
e.preventDefault ();
} 또 다른 {
// IE에서 함수의 기본 동작을 차단하는 방법
Window.event.returnValue = false;
}
거짓을 반환합니다.
}