티스토리 뷰

프로그래밍/JavaScript Web App

JavaScript 이벤트 버블링 및 addEventListener

쇠주는참이슬 2013. 1. 17. 14:18

 

 

자바스크립트 이벤트 버블링 및 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>

'프로그래밍 > JavaScript Web App' 카테고리의 다른 글

jqgrid 속성정보  (0) 2014.08.25
자바스크립트 this  (0) 2013.08.05
자바스크립트 프로토타입 및 생성자 (C#에서 클래스 생성)  (0) 2013.01.15
자바스크립트에서의 this  (0) 2013.01.15
자바스크립트 클로저 (Closure)  (0) 2013.01.15
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/04   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30
글 보관함