이벤트는 4가지 종류가 있다.
1. 마우스 이벤트 : 마우스 버튼 클릭했을때 등.
2. 키보드 이벤트 : 키보드를 눌렀을때 등.
3. 태그요소 고유 이벤트 : ex) img태그같은겨우 이미지가 모두 로딩되면 load이벤트가 발생한다.
4. 사용자 정의 이벤트 : 개발자가 만든 이벤트.
이벤트의 단계.
단계1 : 캡쳐 단계.
단계2 : 타깃 단계.
단계3 : 버블링 단계.
구글링해서 찾은 이미지인데 5번에 있는 (text)에 접근한다고 가정하자. 1번에서 이벤트가 시작되어 순서대로 가다가 10에서 끝난다.
캡쳐 단계는 목적지까지 가기 전의 경로들을, 타겟 단계는 접근하려는 타겟에 접근한 단계, 버블링 단계는 끝내고 다시 돌아오는 단계이다.
1. 캡쳐 단계.
eventphase속성값이 1로 출력되며 이벤트 등록은
$대상.get(0).addEventListener(이벤트이름,리스너,true); 으로 할수 있다.
캡쳐 단계에서는 주로 타깃, 버블링 단계의 이벤트 실행 전에 처리해야 할 사전 작업 또는 타깃,버블링 단계의 이벤트 처리를 제어하기 위한 용도로 가끔 사용한다.
예로 캡쳐 단계에서 stopPropagation();함수를 실행시키면 타깃 단계와 버블링 단계는 실행이 안된다.
2. 타깃 단계.
eventphase속성값이 2로 출력되며 이벤트 흐름이 이벤트를 발생시킨 노드에 머무르는 단계를 말한다.
이때 리스너가 이벤트에 등록되어 있다면 리스너가 실행된다.
이벤트 등록 방법은 $대상.on(이벤트이름, 리스너); 로 한다. 자바스크립트로는
대상.addEventListener(이벤트이름,리스너,false);로 등록이 가능하다.
3. 버블 단계.
eventphase속성값이 3으로 출력되며, 버블 단계는 캡쳐 단계의 역순으로 흐르는 단계를 의미한다.
이벤트 등록은 $대상.on(이벤트이름,리스너); 로 할수 있다.
모든 이벤트가 버블링이 발생하진 않아서 버블 단계가 없는 이벤트도 있다.
아래 소스를 실행시켜보면 더 자세히 파악할 수 있다.
<!DOCTYPE html PUBLIC "-//W3C//DTD Xhtml 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<style>
body{
font-size:9pt;
}
* {
margin:50px;
border:1px solid #f00;
min-height: 20px;
cursor:pointer;
}
</style>
<script src="../../libs/jquery-1.11.0.min.js"></script>
<script>
var count=0;
$(document).ready(function(){
// 캡쳐 단계에 이벤트 등록
document.addEventListener("click",function(e){
count++;
console.log("01. doument phase="+e.eventPhase, "count="+count);
//e.stopPropagation();
},true);
// 캡쳐 단계에 이벤트 등록
document.body.addEventListener("click",function(e){
count++;
console.log("02. body phase="+e.eventPhase, "count="+count);
},true);
// 캡쳐 단계에 이벤트 등록
$("#A1").get(0).addEventListener("click", function(e){
count++;
console.log("03. A1 phase="+e.eventPhase, "count="+count);
},true);
// 캡쳐 단계에 이벤트 등록
$("#B1").get(0).addEventListener("click", function(e){
count++;
console.log("04. B1 phase="+e.eventPhase, "count="+count);
},true);
// 캡쳐 단계에 이벤트 등록
$("#A2").get(0).addEventListener("click", function(e){
count++;
console.log("05. A2 phase="+e.eventPhase, "count="+count);
},true);
// 캡쳐/버블 단계에 이벤트 등록
$(document).on("click",function(e){
count++;
console.log("11. doument phase="+e.eventPhase, "count="+count);
});
// 캡쳐 단계에 이벤트 등록
$("body").on("click",function(e){
count++;
console.log("12. body phase="+e.eventPhase, "count="+count);
});
// 캡쳐 단계에 이벤트 등록
$("#A1").on("click", function(e){
count++;
console.log("13. A1 phase="+e.eventPhase, "count="+count);
});
// 캡쳐 단계에 이벤트 등록
$("#B1").on("click", function(e){
count++;
console.log("14. B1 phase="+e.eventPhase, "count="+count);
});
// 캡쳐 단계에 이벤트 등록
$("#A2").on("click", function(e){
count++;
console.log("15. A2 phase="+e.eventPhase, "count="+count);
});
// 캡쳐 단계에 이벤트 등록
$("#B2").on("click", function(e){
count++;
console.log("16. B2 phase="+e.eventPhase, "count="+count);
});
})
</script>
</head>
<body>
<div id="A1">
A1
<div id="B1">
B1
<div id="C1">
C1
</div>
</div>
</div>
<div id="A2">
A2
<div id="B2">
B2
<div id="C2">
C2
</div>
</div>
</div>
</body>
</html>
실행시키고 중간부분인 b2을 클릭하고 크롬 개발자도구에서 로그를 보면 아래처럼 나온다.
아래는 로그 결과.
1,2,5는 캡쳐 단계, 16는 타깃 단계, 15,21,11은 버블 단계이다.
event.phase가 중간에 출력되는데 1이 캡쳐, 2가 타깃, 3이 버블 단계이다.