최신 02-image.html에서 질문있습니다.

Question

안녕하세요. 선생님 수업 잘 보고 있습니다. 02-images.html 스크립트 마지막 부분인 window.addEventListener('load', init); setImages(); 위 코드 부분에서 코드 순서와 동작 순서가 잘 이해가 안가서 질문 남깁니다. 단순히 실행 순서만 생각했을 때는 setImages 함수가 먼저 실행되서 이미지 소스의 경로값을 지정한 다음에 'load'이벤트로 이미지 파일을 로드해야 된다고 생각했는데, 실제로 실행되는 것을 보니 두 코드의 순서는 상관없이 작동은 setImages()가 첫번째로 잘 동작하더라구요.  제가 생각했을 때는 setImages()를 실행하지 않으면 window load 이벤트가 받아올 이미지 경로를 못 찾을 거라고 생각했거든요. 제가 모르고 있는 부분이 혹시 어떤 부분일까요! 도움 부탁드립니다.

1분코딩 · Answer

'load' 이벤트와 이벤트핸들러 함수는, 이거이거이것들을 로드하시오! 가 아닌, 이거이거 문서에 있는 것들이 전부 다~로드 되면, 이벤트핸들러 함수가 자동으로 실행됩니다- 라는 뜻이랍니다 :) 문서에 사용된 이미지 등의 자원이 모두 로드가 끝나면 init 함수가 자동으로 실행되는 것이지요. setImage 함수는 이 문서에서 로드해야할 이미지들을 지정하고 로드를 시작하는 역할을 하고, 그 이미지들의 로드가 모두 끝나면 init 함수가 자동으로 실행된다고 생각하시면 됩니다.