자바스크립트 완벽 가이드

the De󼴩nitive Guide

489

15.2 이벤트

// Window

객체의

onload

프로퍼티를

함수로

설정합니다

.

//

이

함수가

이벤트

핸들러이며

문서를

불러올

때

호출됩니다

.

window.onload

=

function() {

// <form>

요소를

찾습니다

.

let form

=

document.querySelector("form#shipping");

//

폼을

전송하기

전에

호출될

이벤트

핸들러

함수를

등록합니다

.

// isFormValid()

는

다른

곳에서

정의했다고

가정합니다

.

form.onsubmit

=

function(event) { //

사용자가

폼을

전송할

때

if (!isFormValid(this)) { //

폼

입력이

유효한지

체크합니다

.

event.preventDefault(); //

유효하지

않다면

폼

제출을

막습니다

.

}

};

};

이벤트 핸들러 프로퍼티의 단점은 이벤트 대상이 이벤트 타입 하나당 최대 한 개의

핸들러만 받는다는 가정하에 설계됐다는 점입니다.

addEventListener()

는 이전에

등록한 핸들러를 덮어 쓰지 않으므로 일반적으로

addEventListener()

를 사용해 이

벤트 핸들러를 등록하는 게 더 좋습니다.

󻱃󻅳󼞇󽴔󼩇󺦳󺲻󽴔󻙜󻘀󽴔󻗳󻳤

요소의 이벤트 핸들러 프로퍼티는 대응하는 HTML 태그의 속성으로 ...