티스토리 뷰
웹 페이지가 로딩되었을 때 로딩된 이벤트에 맞춰 원하는 함수, 코드를 호출할 수 있도록 한다.
대표적으로 window.onload 콜백함수가 있다.
window.onload
window.onload = function() {
alert("윈도우 창이 켜졌을 때 바로 실행됨");
}실행화면
한번에 실행될 load 메서드가 1개보다 많을 시 마지막 onload 메서드만 실행된다.
window.onload = function() {
alert("윈도우 창이 켜졌을 때 바로 실행됨");
}
window.onload = function() {
alert("한번에 실행 될 onload 메소드가 1개보다 많을 시 제일 마지막만 실행.");
}실행화면
태그에서 onload
<body onload = alarm()>
<script>
function alarm() {
alert("body 태그에서 onload 지정 가능");
}
</script>
</body>실행화면
특정객체에서 onload
<body>
<input type="button" id="btn1" value="click the button" onclick=count_alarm()>
<div id="count">0</div>
<script>
window.onload(alert("페이지가 로딩되었습니다."));
function count_alarm() {
const count = document.getElementById("count");
let number = count.innerText;
number ++;
count.innerText = number;
const alarm = document.getElementById("btn1").onload(alert("숫자가 1 증가합니다."));
}
</script>
</body>실행화면
한번에 onload 메서드가 실행되지 않기때문에 페이지가 로딩되었을 때 페이지가 로딩되었습니다. 라는 문구가 뜨며 버튼을 클릭시마다 onload 메서드를 지정할 수 있다.
참고자료
https://blog.naver.com/PostView.nhn?blogId=ka28&logNo=221991865312
[JAVASCRIPT] 자동 실행함수(window.onload)와 jquery의 ready함수
간혹 가다가 어떤 페이지가 로딩 되자 마자 어떠한 자바 스크립트를 실행하게끔 해주고 싶은 경우가 발생한...
blog.naver.com
'📦 개발 > JavaScript' 카테고리의 다른 글
| [JAVASCRIPT] var, let, const 비교 (0) | 2023.02.02 |
|---|---|
| [JAVASCRIPT] addEventListener() (0) | 2023.01.14 |
| [JAVASCRIPT] 이론 2 (0) | 2023.01.04 |
| [JAVASCRIPT] 이론 1 (0) | 2023.01.03 |
| [JAVASCRIPT] 숫자 맞히기 게임 (0) | 2022.12.31 |