구조와 동작의 분리
웹표준에서 말하는 기본적인 철학이 구조와 동작, 표현의 분리이다.
아래 소스는 IE7, FF2에서 테스트 되었다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Structure와 Behavor의 분리</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="onload.js"></script>
<script type="text/javascript">
//<![CDATA[
// window.onload 에 함수를 등록한다.
addOnLoadListener(addCountryEventListener);
/*
* 지정된 객체의 이벤트를 등록한다.
* 참조: Document Object Model (DOM) Level 2 Events Specification
* http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/Overview.html
*/
function addCountryEventListener() {
var country = document.getElementById('country');
if (country.addEventListener) {
// IE가 아닌 경우
country.addEventListener("change", setCountry, false);
} else if (country.attachEvent) {
// IE의 경우
country.attachEvent("onchange", setCountry);
}
}
function setCountry(e) {
if (!e) var e = window.event;
// IE의 경우 this 오브젝트를 사용할 수 없음.
var tg = (window.event) ? e.srcElement : e.target;
// IE의 경우 option value를 생략한 경우 선택한 값이 없으나,
// FF의 경우 데이터를 가져옴.
document.getElementById('form1').selectedCountry.value = tg.options[tg.selectedIndex].value;
}
//]]>
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<dl>
<dt>Select Country</dt>
<dd>
<select name="country" id="country">
<option value="Korea">Korea</option>
<option value="France">France</option>
<option value="German">German</option>
<option value="Italy">Italy</option>
</select>
</dd>
<dt>Selected Country</dt>
<dd>
<input type="text" name="selectedCountry" id="selectedCountry" />
</dd>
</dl>
</form>
</body>
</html>
아래의 파일을 다운받으면 예저를 볼 수 있다.
xhtml.zip
(0) 
(0)