이벤트 캡처
이벤트 캡처 이벤트는 최상위 요소에서 대상 요소로 시작됩니다. 이벤트 버블링의 반대입니다. , 대상 요소에서 시작하여 최상위 요소로 이동합니다.
코드 정교화
다음 코드에서는 본문 섹션에서 세 개의 div 요소를 가져오고 스타일을 적용하여 중첩되도록 합니다.
- addEventListener를 사용하여 각 div 태그에 이벤트 핸들러 추가 ().
- 여기서 이벤트가 "클릭인지 확인하십시오. " 이벤트.
- addEventListener() 메소드는 3개의 매개변수를 허용합니다.
a) 접근하려는 이벤트, 여기가 클릭 이벤트입니다.
b) 이벤트 핸들러 기능 경고 메시지를 표시하기 위해.
c) 세 번째 매개변수를 위상이라고 합니다. 이 매개변수에서 true를 유지하면 이벤트 캡처 활성화됩니다. false를 유지하면 이벤트 버블링 활성화됩니다.
- 이벤트 핸들러 기능 경고 상자를 표시하는 데 사용되는 는 getAttribute를 사용합니다. () 클릭한 div 요소의 id 값을 가져옵니다.
- 가장 안쪽에 중첩된 태그 div3를 클릭하면 , 여기에서 이벤트 캡처가 활성화되었으므로 경고 메시지는 상단 div1 에서 시작됩니다. 대상 태그 div3에 태그 .
- div2 를 클릭하면 태그를 입력하면 상단 div1 부터 알림 상자가 표시됩니다. 대상 태그 div2.에 대한 태그
예
<html>
<head>
<style>
.divstyle{
display:table-cell;
border: 2px solid black;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div id = "div1" class="divstyle">
div1
<div id = "div2" class="divstyle">
div2
<div id = "div3" class="divstyle">
div3
<script>
var divs = document.getElementsByTagName("div");
for(var i = 0; i<divs.length; i++){
divs[i].addEventListener("click",clickhandler,true );
}
function clickhandler() {
alert(this.getAttribute("id") + "event got handled");
}
</script>
</body>
</html> 위의 프로그램을 실행하면 화면에 다음 이미지가 나타납니다.
위의 div3를 클릭하면 (대상 요소) 다음을 출력으로 얻습니다.
출력
On clicking ok of the above div1 alert box we get the following div2 alert box opened
On clicking ok of the above div2 alert box we get the following div3 alert box opened.
