이벤트 등록하는 방법

html과 css, 자바스크립트는 분리하면 분리할 수록 좋다.


content (HTML) - what is it?
presentation (CSS) - how does it look?
behavior(Javascript) - how does it respond to user interaction?


1. 가장 좋은 방법
<button id="ok">Click me

<script>
window.onload = initializeBody;

// called when page loads; sets up all event handlers
function initializeBody() {
document.getElementById("ok").onclick = okay;
}
function okay() {
this.style.color = "red";
}
</script>


2. 그 다음 좋은 방법
<button id="quitButton"/>Quit

<script>
window.onload=function(){
quitButton.onclick=shutdown;
}

function shutdown(){
if(confirm("Are you sure you want to shutdown?")){
//여기에 무엇을 할지 작성하면 됨
}
}
</script>


3. 가장 않좋은 방법
<button id="ok" onclick="okay();">Click me

<script>
// called when OK button is clicked
function okay() {
var button = document.getElementById("ok");
button.style.color = "red";
}
</script>