이벤트 핸들러 부착(Attaching an Event Handler)

이벤트 핸들러를 부착(?)하는 방법은 두 가지가 있다.

이벤트 핸들러 부착하기

Obtrusive Event Handlers (좋지 않은 방식)

HTML 문서 내에 태그 안에 구체적으로 다는거.

<button id="ok" onclick="okayClick();">OK</button>
...
function okayClick() {
...
}

Attaching an Event Handler in JS

JS 파일 안에서 붙이기.
이러면 HTML 페이지에는 event handler가 하나도 안보일 수가 있음.
그런데 그냥 달 수가 없음.

var button1 = document.getElementById("ok"); // it's return null...
button1.onclick = okayClick;

 

왜냐하면, 보통 js파일은 head다가 넣는게 정석이기 때문.
헤드에서 js파일을 읽으면 아직 body가 로드되기 전이고, 그렇다면
document.getEleme...뭐시기를 해도 가져올 수가 없다는 말이다. (결국 null을 가져오는 격)

그래서 페이지 로드가 완료된 후에 이벤트 핸들러를 달아줄 수 있다.

window.onload = pageload; // pageload() 아님, 그건 실행임
function pageload() {
    var button1 = document.getElementById("ok");
    button1.onclick = okayClick; // 애도 마찬가지로 () 붙여주면 안됌!!      
}

혹은

window.onload = function() {
    ...
} 여기에다 붙여도 됌

 

!주의!
I. 이벤트 핸들러이름은 전부 소문자다. onclick이라고 해서 onClick이 아니다.
걍 다 소문자임!!!
II. 이벤트 핸들러에 붙이는건 함수의 정의임. 실행이 아니니까 () 붙이면 안됌!!