[Javascript&HTML] 이벤트가 등록되지 않는 현상
자바스크립트 코드로 무작정 HTML 요소에 이벤트를 등록한다면, 다음과 같이 작성할 경우가 몹시 많다.
하지만 이 코드는 제대로 동작하지 않을 수가 있다.
저 코드에서 foo라는 id를 가진 요소를 가져와야 거기다가 이벤트를 등록하는 건데.
저 js 코드가 작동하는 시점에서 그 요소가 완성되어있다는 보장이 없기 때문이다!
이걸 완벽히 해결하려면 문서가 완전히 로딩될때까지 코드의 실행을 지연시켜야 한다.
해결법은 위와 같이 ready 함수를 작성해서 사용하거나, 제이쿼리 등의 ready 함수를 사용하는 것이다.
그렇다.
function ready(callback) {
// see if DOM is already available
if (
document.readyState === "complete" ||
document.readyState === "interactive"
) {
// call on next available tick
setTimeout(callback, 1);
} else {
document.addEventListener("DOMContentLoaded", callback);
}
}