이 기사에서는 JS의 이벤트 캡처 모델 및 버블 모델에 대해 설명합니다. 참조를 위해 공유하십시오.
특정 구현 방법은 다음과 같습니다.
Example 1:
다음과 같이 코드를 복사하십시오. <html>
<헤드>
<script type = "text/javaScript">
Window.onload = function () {
document.getElementById ( 'par'). addeventListener ( 'click', function () {alert ( 'par');}, true);
document.getElementById ( 'son'). addeventListener ( 'click', function () {alert ( 'son');}, true);
}
</스크립트>
<스타일 유형 = "텍스트/CSS">
#par {너비 : 300px; 높이 : 200px; 배경 : 회색;}
#son {너비 : 200px; 높이 : 100px; 배경 : 녹색;}
</스타일>
</head>
<body>
<div id = "par">
<div id = "son"> </div>
</div>
</body>
</html>
Example 2:
다음과 같이 코드를 복사하십시오. <html>
<헤드>
<script type = "text/javaScript">
Window.onload = function () {
document.getElementById ( 'par'). addeventListener ( 'click', function () {alert ( 'par');});
document.getElementById ( 'son'). addeventListener ( 'click', function () {alert ( 'son');});
}
</스크립트>
<스타일 유형 = "텍스트/CSS">
#par {너비 : 300px; 높이 : 200px; 배경 : 회색;}
#son {너비 : 200px; 높이 : 100px; 배경 : 녹색;}
</스타일>
</head>
<body>
<div id = "par">
<div id = "son"> </div>
</div>
</body>
</html>
addeventListener : 세 번째 매개 변수는 선택적 매개 변수이며, 기본적으로 거품 모델, 즉 가장 작은 층이 먼저 트리거됩니다 (div with id is son); True 매개 변수가 추가되면 캡처 모델 (html-> body ---> div)의 캡처 모델이며 그러한 수준에 따라 트리거됩니다.
예 1의 HTML 코드에는 두 개의 div가 있습니다. 작은 div는 큰 div에 포함되어 있습니다. 작은 div를 클릭하면 Alert ( 'par') 이벤트가 먼저 트리거됩니다. 그러면 경고 ( '아들') 전체 조각이 트리거됩니다. 예 2는 정확히 반대입니다.
"object.onclick"속성이 이벤트를 트리거하는 데 사용되는 경우 버블 모델이 사용됩니다.
IE는 addeventListener를 지원하지 않지만 첨부 보전을 사용합니다. 그러나 AttachEvent는 세 번째 매개 변수를 지원하지 않으며 모델을 캡처하지 않습니다.
이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.