ewbi.develops에서
Programmatic value changes and onchange event라는 재미있는 글을 봤습니다. 요즘 개발하는데 골머리를 알고 있는 input태그와 관련있는 글이라서 더 관심있게 보았는데요.
- 하나는 log출력 코드입니다.
getElementById를 통해서 얻어온 div의 innerHTML에 log를 출력하는 내용인데요. 출력 위치를 구분하기 위해서 사용하는 <br/>태그 사용이 눈에 들어오네요 ^^
- textbox.onchange()를 직접 호출하는 코드입니다. textbox외부에서 onchange()를 호출함으로서 onchange이벤트를 발생시키는데요. textbox.onchange()를 호출할 때 onchange의 파라미터로 textbox가 들어가게 되므로 textbox를 따로 넣어주지 않고도 호출이 되게 됩니다.
# addEventListener로 change 이벤트를 넣었을 때는 textbox.onchange자체를 없는 것으로 인식합니다.
다음은 관련 글에 나와있는 소스코드입니다.
<html>
<head>
<script type="text/javascript">
function onChange(textbox) {
log("onChange (" + textbox.value + ")");
}
function programmaticChange() {
log("programmaticChange");
var textbox = document.getElementById("textbox");
textbox.value += "*";
if (typeof(textbox.onchange) == "function")
textbox.onchange();
}
function log(text) {
document.getElementById("log").innerHTML += "<br>" + text;
}
</script>
</head>
<body>
<input type="text" id="textbox" onchange="onChange(this)" />
<a href="#" onclick="programmaticChange(); return false">
programmaticChange
</a>
<hr />
<div id="log"></div>
</body>
</html>
출처:
Programmatic value changes and onchange event
댓글 없음:
댓글 쓰기