Uncaught TypeError: Cannot read property 'addEventListener' of null

에러의 원인은 HTML이 모두 로드되기 이전에 JavaScript가 HTML을 참조하기 때문이다.

즉, addEventListener 함수가 참조해야할 태그가 HTML에 아직 생성되기 이전이기 때문에 null 값을 참조하여 에러가 발생하는 것이다.

해결방법은 몇가지가 있다.

해결 방법1.

닫는 태그인 </body> 태그 위에 선언

<head></head> 태그안에서 js파일을 호출하지 않고 HTML 코드가 작성된 맨 아래에 즉, <body></body> 태그에서 닫는 태그인 </body> 태그 위에 선언하는것이다.

이렇게 작성하게되면 HTML 코드가 완전히 로드된 후에 JavaScript 파일이 호출되기 때문에 해당 문제를 해결할 수 있다.

해결 방법2.

window.onload = function(){}

window.onload = function(){} 함수를 사용하면 웹브라우저의 모든 구성요소들의 로드가 완료되었을 때 브라우저에의해 호출되는 함수로

해당 부분에 코드를 작성하면 HTML의 모든 구성요소들의 로드가 완료된 뒤 해당 함수를 호출한다.

해결 방법3. (추천)

<script></script> 태그에 defer 속성 사용하기

<head></head> 태그 내부에 script 태그를 사용하고 src 속성을 이용해서 js파일을 불러온다. 그리고 속성으로 defer 키워드도 함께 작성해준다.

<script src="index.js" defer></script>

defer은 비동기적으로 스크립트를 불러오는 속성이다.

해결 방법2에서 window.onload와 마찬가지로 HTML의 모든 요소들의 로드가 완료되면 그 후에 해당 js파일을 실행하는것이다.

하지만 위의 해결 방법들과 다른점이 존재하는데 이 속성을 사용하면 비동기적으로 코드가 동작한다는것이다.

프로그램은 코드를 해석할때 왼쪽에서 오른쪽으로, 위에서 아래로 이동하며 해석한다.

그러므로 위의 해결방법1과 2는 HTML 코드를 불러오고 다 해석한 뒤에 js파일을 불러오고 해석한다.

하지만 해결 방법3은 head 태그안에서 defer 속성을 작성한 script 태그를 만나면 비동기적으로 코드를 로드하고

HTML 요소들이 모두 로드되면 따로 불러오는 시간없이 바로 프로그램을 해석하여 실행할 수 있다.

그러므로 해결방법1,2 보다 프로그램을 조금 더 빠르고 효율적으로 실행하도록 할 수 있다.

프로그래밍 공부 노트