// 버튼에 클릭 이벤트 리스너 등록
myButton.addEventListener('click', function() {
// 버튼이 클릭되었을 때 실행할 코드 작성
console.log('버튼이 클릭되었습니다!');
});
간단한 버튼 구현인데 자꾸 button이 클릭이 안됐다.
애를 먹었지만 chatgpt한테 자꾸 물으니 해답을 찾았다.
addEventListener는 비동기적 표현인데 html에서 script내에 js코드를 넣을 때 body안에 넣어야된다.
다른 방법은 밑에 방법처럼 defer를 넣어주어서 문서 파싱이 끝난 후 js파일을 불러와준다.
그래서 저 코드가 정상 수행될 수 있다.
<script src="app.js" defer></script>
async/await를 사용해도 비동기적 구현으로 오류를 방지할 수 있다 한다.
하지만,
defer를 더 선호해야하는 이유-
defer 는 동기 스크립트를 차단할 수 없지만, async 는 스크립트 다운로드에 따라 차단할 수도 있다.
: 가져온 정보고 완벽히 이해는 안되지만, defer가 중요하다는 걸 알게 되었다.
'IT > HTML CSS JavaScript' 카테고리의 다른 글
JS Doc 주석 활용 (0) | 2023.06.12 |
---|---|
유튜브 영상 삽입 (iframe, youtube data api v3) (0) | 2023.06.08 |