widow.onload() 함수
자바스크립트에서 페이지가 로드되면 자동으로 실행되는 전역 콜백함수이며,
웹 페이지의 모든 요소들이 로드된 후 호출되며,
웹 페이지에서 여러번 사용해도 window.onload() 함수는 하나만 적용됩니다.
이를 대체할 수 있는 방안은 글 아래쪽에 작성해보겠습니다.
아래와 같이 코드를 작성했습니다.
<body>
<script>
let changeColor = document.getElementById( 'pTag1' );
changeColor.style.color = "blue";
</script>
<p id = "pTag1"> Hello world </p>
</body>
위와 같은 코드의 실행순서는
자바스크립트의 document.getElementById( 'pTag1' )가
p 태그의 id인 pTag1이 생성되기 전에 실행되므로
에러가 발생하며, style.color.blue가 적용되지 않습니다.
에러 내용을 단어를 통해 뜻을 유추해본다면
정의되지 않은 개체의 속성을 읽을 수 없다.하려고 한다.
그렇다면
페이지가 로드되면 자동으로 실행되는 전역 콜백함수인
widow.onload()을 적용해보겠습니다.
<body>
<script>
window.onload = function() {
let changeColor = document.getElementById( "pTag1" );
changeColor.style.color = "blue";
}
</script>
<p id = "pTag1"> Hello world </p>
</body>
style.color.blue가 적용되는 것을 볼 수 있습니다.
웹 브라우저를 자체를 담당하는 window라는 객체가,
웹 문서를 불러올떄 사용되는 시점에 실행되는onload라는 함수를
내가 재정의(오버라이딩)한다는 개념
window.onload 대체하는 방법
그런데 만약 웹 페이지에서 window.onload를 여러 번 사용하는 경우는?
여러번 호출되지 않고 단 한 번만 호출된다는 특징이 있습니다.
window.addEventListener('onload',콜백함수)
일단 , window.onload를 여러 번 사용해서 출력결과를 확인해보겠습니다.
<body>
<script>
window.onload = function() {
let changeColor = document.getElementById( "pTag1" );
changeColor.style.color = "blue";
}
window.onload = function() {
let changeColor = document.getElementById( "pTag1" );
changeColor.style.backgroundColor = "orange";
}
</script>
<p id = "pTag1"> Hello world </p>
</body>
window.onload 함수 중 두번쨰 함수만 실행된 것을 볼 수 있습니다.
이제 이를 해결할수 있는 addEventListener() 콜백함수를 사용해보겠습니다.
<body>
<script>
window.onload = function() {
let changeColor = document.getElementById( "pTag1" );
changeColor.style.color = "blue";
}
window.addEventListener('load', function() {
let changeColor = document.getElementById( "pTag1" );
changeColor.style.backgroundColor = "orange";
});
</script>
<p id = "pTag1"> Hello world </p>
</body>
window.onload와 addEventListener()를 사용한 모든 콜백함수가 적용된 것을 확인 할 수 있습니다.
또, addEventListener() 콜백함수를 2개 적용해보겠습니다.
<body>
<script>
window.onload = function() {
let changeColor = document.getElementById( "pTag1" );
changeColor.style.color = "blue";
}
window.addEventListener('load', function() {
let changeColor = document.getElementById( "pTag1" );
changeColor.style.backgroundColor = "orange";
});
window.addEventListener('load', function() {
alert(" event ");
});
</script>
<p id = "pTag1"> Hello world </p>
</body>
window.onload와 addEventListener()를 사용한 모든 콜백함수가 적용된 것을 확인 할 수 있습니다.
댓글