javascript window.onload와 onload의 차이를 알고 계신가요? 저는 사실 강의를 들을 때는 잘 몰랐었는데 정리한 코드를 살펴보다가 알게되었습니다. 이 위의 이벤트 핸들러들은, 문서가 로드되었을 때의 실행되는 주체가 다르고, 실행의 시기에 차이가 있다는 점을요. 이 차이를 알 수 있도록, 한 번 더 보도록 할게요.
서론 : 이벤트 핸들러가 무엇인가?
이벤트 핸들러를 파악하기 이전에, 이벤트 처리기라던지 등의 내용을 알고 있는 것이 중요한데. 이 내용에 대한 주제는 다른 포스팅에서 다루니, 이번 포스팅에서는 간편하게 설명해보도록 합니다.
기본적으로 HTML과 CSS 그리고 JavaScript 는 모두 다른 파일에 분리시켜서 작성하는 것이 코드를 더욱 깔끔하게 만들 수 있습니다. 이 때 우리가 사용하는 명령어가 이벤트인데요. 이벤트는 우리가 마우스 커서를 움직였을 때 혹은 클릭을 했을 때 웹에서 동작을 수행하게끔 만드는 것이라고도 할 수 있죠
그럼 이 때 우리가 만든 함수를 호출하고, 스크립트로 작성할 때 사용하게 되는 것이, 핸들러와 리스너라고 볼 수 있습니다.
본론
1. body.onload :
HTML에 작성된 body 요소의 로드가 완료되면 실행이 며, body으 요소가 모두 로드되었을 때 발생하며, 주로 <body>태그 내에서 작성이 되, 직접 설정이 되는 경우가 많습니다. 아래와 같이 말이죠.
<body onload="myFunction()">
2. window.onlad
body.onload와 다르게 전체 창(window)의 로드가 완료가 되면 실행이됩니다. 차이점이라고 한다면 HTML의 모든 스타일, 이미지등 모든 것이 로드되는 경우를 말합니다. 이 둘은 차이는 결국 "언제? 로드 되는가?" 에 중점을 둔다면 쉽게 차이점을 발견할 수 있습니다.
window.onload = function() {
};
3. 그럼 이거 두 개 다 써봐야지!? 라고 하면?
만일 <body onload="">의 이벤트와 함꼐 쓰게 되면 window.load 가 실행되지 않습니다.
댓글