이벤트 버블링 예제이다. 처음 페이지 로딩한 뒤 적색 부분을 클릭하면 화면 1, 2, 3 순으로 Alert창이 표시된다.
▣ EventBubbling.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Event Bubbling</title>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR" />
<script type="text/javascript">
//<![CDATA[
function mouseDown(nsEvent) {
var theEvent = nsEvent ? nsEvent : window.event;
var locString = "X = " + theEvent.screenX + " Y = " + theEvent.screenY;
var theSrc = theEvent.target ? theEvent.target : theEvent.srcElement;
alert(locString + " " + theSrc);
}
document.onmousedown=function (evnt) {
var theEvnt = evnt? evnt : window.event;
alert(theEvnt.type);
}
window.onload=setupEvents;
function setupEvents( ) {
document.getElementById("first").onmousedown=mouseDown;
document.getElementById("second").onmousedown=function ( ) {
alert("Second event handler");
}
}
//]]>
</script>
</head>
<body>
<div id="first" style="padding: 20px; background-color: #ff0; width: 150px">
<div id="second" style="background-color: #f00; width: 100px; height: 100px">
</div>
</div>
</body>
</html>
▣ 페이지 로딩
▣ 화면 1
▣ 화면 2
▣ 화면 3
728x90
'■ Front-End ■ > JavaScript' 카테고리의 다른 글
| [JavaScript] 웹 개발할 때 자주 사용하는 정규표현식 모음 (RegExp) (0) | 2023.02.28 |
|---|---|
| [JavaScript] 이벤트 헨들링에서 키 코드(Key Code) 참고 테이블 (0) | 2023.02.28 |
| [JavaScript] 팝업(Popup)으로 폼(Form)값 넘기기 (0) | 2023.02.28 |
| [JavaScript] History, Screen, Navigator 브라우저 객체 예제 (0) | 2023.02.28 |
| [JavaScript] 날짜계산 및 문자열 출력 (0) | 2023.02.28 |
댓글