AddEventListener 오류 해결방법 (업데이트)

이전 글은 정말 JS의 J자도 모른채로 글을 써버렸네요 ㅠㅠ 

다시 수정하여 올립니다.

 

1. 기본적으로 script는 body태그의 가장 아래에 작성해야합니다.

script를 body의 상단에 작성하게 되면, 간혹 html이 로드 되기 전에 script를 먼저 불러와버리는 경우가 생깁니다.

그렇게되면 addEventListener을 부여할 DOM을 찾지 못하게 되는 현상이 발생하는 것이죠. 

 

1. script 태그에 defer 을 삽입해 줍니다. (defer 스트립트)

브라우저는 defer 속성이 있는 스크립트를 백그라운드에서 다운로드 합니다. defer 스트립트를 다운로드 하는 도중에도 HTML 피싱이 멈추지 않습니다. 그리고 defer 스크립트 실행은 페이지 구성이 끝날 때까지 지연됩니다.

 

 

참고 링크 : JAVASCRIPT.INFO

ko.javascript.info/script-async-defer

---

 

요즘 vanilla js 공부를 하느라 회사작업할때 jquery 보단 js를 사용하려 노력중인데

자꾸만 개발자 검사도구에서 AddEventListener 관련 오류가 떠서 고민중이었습니다.

 

해결해보고자 인터넷 검색을 해보니 가장 많이 나오는 답변은

 

1. html 하단에 스크립트를 작성하기였습니다.

html 최하단에 js를 작성하면 html이 먼저 로드되고 js 가 그 다음 로드되기 때문에

작동이 잘 될거라는 것이었습니다.

 

물론 html 최 하단에 js를 작성해보니 작동은 잘 되더라구요

그렇지만 js를 작성할 때 마다 각 페이지 html 하단에 js를 작성해야한다는 말인데..

페이지 수가 많은경우나 공통적으로 사용하는 js가 있는 경우에는..

너무 귀찮은 작업이기에 이 방법은 하지 않기로 했습니다.

 

* 페이지 수가 적거나 html에 js를 작성해도 좋은 분은 이 방법을 사용해도 좋을 것같아요.

 

2. window.onload = function(){} 사용하기

이 방법은 검색해보니 다른 분들은 다 잘된다고 하는데,

사실 제 경우에는 작동이 잘 안되었어요. 그래서 그냥 버린 방법이었는데.. 검색을 통해 방법을 찾았습니다.

 

window.onload = function(){
	var solve = document.getElementById("myId");
    
    if(solve){
    	solve.addEventListener("click", myFunction);
    }
    
    function myFunction(){
    }
    
}

 

if문을 사용하여  위 예제의 변수 solve를 담아주고

만약 solve이면 solve.addEventListener() 작동으로 설정해주니 작동이 잘 되었어요

 

 

이제 마음껏 외부 js 파일에서 addEventListener을 사용할 수 있을 것같아요^^*

(또 새로운 문제를 직면하기 전까진 말이죠..ㅎㅎ)

 

 

3 element.addEventListener("click", function(){}) 사용하기 (추가됨)

 

위와 같이 한번에 통합된 구문을 쓰면 오류가 나지 않는 것 같습니다.

필요에 따라 사용하면 좋을 것 같아요