JavaScript 이벤트 버블링 및 addEventListener
자바스크립트 이벤트 버블링 및 addEventListener
addEventListener : 표준이벤트 할당 작업 IE제외 (on을 뺀다. load, click)
attachEvent : 표준이벤트 할당 작업 IE (onload, onclick)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#a,#b {
background-color: yellow; padding:10px 10px 10px 10px;
font-size: 20pt;
}
</style>
<script type="text/javascript">
window.addEventListener("load", function(){ // IE는 attachEvent("onload", function(){ 이렇게 처리
document.addEventListener("click", function(e){ // IE는 attachEvent("onclick", function(){ 이렇게 처리
console.log("Document");
e.stopPropagation(); // 이벤트 버블링을 막는 함수 IE외에
window.event.cancelBubble = true;// IE에서 이벤트 버블링을 막는 함수
});
document.getElementById("a").addEventListener("click", function(e){ // IE는 attachEvent("onclick", function(){ 이렇게 처리
console.log("OUTER");
e.stopPropagation(); // 이벤트 버블링을 막는 함수
window.event.cancelBubble = true;// IE에서 이벤트 버블링을 막는 함수
});
document.getElementById("b").addEventListener("click", function(e){ // IE는 attachEvent("onclick", function(){ 이렇게 처리
console.log("INNER");
e.stopPropagation(); // 이벤트 버블링을 막는 함수
window.event.cancelBubble = true; // IE에서 이벤트 버블링을 막는 함수
});
})
//}
</script>
</head>
<body>
<div id="a">
OUTER
<div id="b">
INNER
</div>
</div>
</body>
</html>