일반적으로, 스크립트를 문서의 마지막(</body>) 이전에 삽입하면 굳이 이벤트를 이용해 프로그래밍을 처리할 필요가 없다. 다만, 문서의 <head>영역에 스크립트가 삽입되거나 외부의 파일에 정의되어 있다면 이벤트를 연결해 문서의 로드시저에 맞게 처리해야 한다.
window.onload (= load이벤트)
- 웹페이지(DOM데이터)의 로딩이 끝나는 시점(이벤트)에 실행되는 함수를 지정하며 {}안에 문서가 다 읽어지고 난 후 (로딩 후) 실행시킬 자바스크립트 코드를 넣어주면 실행된다.
- 페이지 안의 이미지나 외부파일이 로드 될 때까지 기다린 후에 실행되기 때문에 로딩시간이 길어질 수 있다.
- 동일한 문서에 오직 onload는 하나만 존재해야 한다.
* 중복될 경우, 마지막 선언만 실행된다.
* 외부 라이브러리에서 이미 선언된 경우 이를 찾아 하나로 합치는 과정이 필요하다.
- 외부의 자원(iframe, image, script)을 사용하는 경우에도 해당된다.
window.onload = function(){
}
<body onload="">
- window.onload와 <body onload="">는 동시에 사용할 수 없다.
<body onload="">가 실행되면 window.onload는 실행되지 않는다. (무시됨.)
* window.onload를 <body>요소에 속성(attribute)으로 지정한 것이다.
<body onload="javascript:함수명;">- window 객체뿐만 아니라 원하는 객체(object)가 로드되었을 때 코드를 설정할 수 있다.
document.getelementByID("myFrame").onload = function(){
//실행될 코드
}- 이벤트를 직접 연결할 수도 있다.
window.addEventListener('load',function(){
//실행될 코드
});- jQuery load : jQuery에서는 onload와 같은 동작을 하는 load메소드를 제공한다.
$(window).load(function(){
//실행될 코드
})
https://jenny-daru.tistory.com/17
1. 이벤트
- 웹페이지에서 마우스를 클릭했을 때, 키를 입력했을 때, 특정요소에 포커스가 이동되었을 때 어떤 사건을 발생시키는 것
2. 이벤트 연결
- 사용자가 실행 이벤트를 발생시켰을 때 그 이벤트에 대응하여 처리하는 것 => 이벤트 핸들러
- 이벤트 핸들러는 앞에 'on'을 붙여주고 이벤트에 대한 동작(함수)을 처리
★<script> </script>를 <head>태그 내부에 작성할 경우★
- onload는 문서가 모두 로드 되었을 때를 의미한다.
- onload 이벤트가 실행되면 onload의 익명함수 부분은 일단 실행되지 않는다. 문서가 끝까지 로드되었을 때 익명함수가 실행된다.
- 자바스크립트가 <head>태그 안에서 정의되고 getElementById()메서드가 사용될 때는 반드시 onload이벤트 사용
- 자바스크립트는 <body></body>태그 끝난 후에 작성하는 것을 권장
window::onload()
window::onload()와 <body onload="">구문이 있으면 <body onload="">가 먼저 실행되고, 이어서 window::onload()가 실행된다.
<head>
<script type = "text/javascript">
function window::onload(){
//실행할 코드;
}
</script>
</head>
<body onload="javascript:함수명;">
</body>
DOMContentLoaded
HTML과 script가 로드된 시점에 발생하는 이벤트
- onload이벤트보다 먼저 발생한다. 빠른 실행속도가 필요할 때 적합
- IE8이하에서는 지원하지 않는다.(대체방법)
How can I detect DOM ready and add a class without jQuery?
I want to rewrite this line without using jQuery so it can be applied quicker (and before the downloading of the jQuery library). The line is... $(document).ready(function() { $('body').addClass('
stackoverflow.com
If you want to reproduce the jQuery's document.ready event, you can use the onreadystatechange or DOMContentLoaded events where applicable:
function domReady () {
document.body.className += " javascript";
// ...
}
// Mozilla, Opera, Webkit
if ( document.addEventListener ) {
document.addEventListener( "DOMContentLoaded", function(){
document.removeEventListener( "DOMContentLoaded", arguments.callee, false);
domReady();
}, false );
// If IE event model is used
} else if ( document.attachEvent ) {
// ensure firing before onload
document.attachEvent("onreadystatechange", function(){
if ( document.readyState === "complete" ) {
document.detachEvent( "onreadystatechange", arguments.callee );
domReady();
}
});
}window.addEventListener('DOMContentLoaded',function(){
//실행될 코드
})
jQuery ready
자바스크립트의 DOM트리가 준비되었을 때의 시점을 컨트롤하는 메소드로 DOMContentLoaded의 jQuery버전
- onload이벤트보다 먼저 발생한다. (문서의 모든 자원이 다운로드되었을 때 발생하는 onload와 달리 DOM트리만 완성되면 바로 발생하므로 빠른 실행속도가 필요할 때 적합하다.)
- 여러번 사용되면 선언 순서에 따라 순차적으로 실행된다.
$(document).ready(function(){
//실행될 코드
});
[참조]
https://codedragon.tistory.com/5736
https://webdir.tistory.com/515
https://jenny-daru.tistory.com/17
'차근차근 > JAVA Script' 카테고리의 다른 글
| datatables 수정하기 (0) | 2022.02.16 |
|---|---|
| chart.js 그래프 겹침/ 흔들림 (0) | 2022.02.15 |
| location.href 와 location.replace 차이점 (0) | 2021.12.22 |
| history.pushState 화면전환 / 현재 페이지 주소창 url변경하기 (0) | 2021.12.22 |
| pagecontext.request.contextpath (0) | 2021.12.15 |