jQuery 이벤트의 이해
페이지가 로드될때 jQuery가 동작하기위해서 $(document).ready() 이벤트 핸들러에 특정함수를 수행하도록 해야한다.이에대해서 앞에서 설명한바있다.포스팅참조:간단한 jQuery 예졔 문서
위의 링크된 포스팅을 보면 알 수 있듯이 아래와 같이 단순히 코드만으로는 실행되지않고
$('ul').addClass('boxing');
아래와 같이 $(document).ready()를 사용해야한다.
$(document).ready(function(){
$('ul').addClass('boxing');
});
기존 자바스크립트의 window.onload대신에 jQuery에서는 $(document).ready()이 대신 사용된다.
onload와 $(document).ready() 비교
이둘다 자바스크립트에서 페이지의 모든요소에 접근가능하다는 강점을 가지고 있다. 하지만 차이점은 onload의 경우는 페이지의 모든게 다 브라우저로 다운된후에 이벤트가발생하고, jQuery의 경우는 DOM트리를 인식하고 준비완료되면 바로 이벤트가 발생한다.
간단한 예를 들면 여러 이미지가 있는 페이지의 경우 onload의 경우는 모든 이미지를 받은 후 일어나고, 반면 jquery의 경우는 DOM트리를 인식한후 바로 이벤트가 일어난다.
언뜻 들으면 jQuery가 우세하지만 단점도 있다. 만약 이벤트와 관련된 이미지라던지 다른것들이 다운되지 않은상태에 이벤트가 발생해버리면 원하는 결과를 얻을 수 없을 것이다. 따라서 때에 따라 적절하게 사용해야 한다.
- jQuery에서 onload
- 위에서 설명한 jQuery문제를 위해 $(document).ready() 대신 아래와 같이 사용하기도 한다.
$(window).load(function(){
함수내용 어쩌고 저쩌고 나불나불
});
다중 스크립트 사용
우리가 스크립트를 하면서 함수를 한두번 사용할것이아니다.여러번사용해야하는데 onload의 경우는 두함수가있다면 두번째 함수를 이벤트 명령시키면 첫번째 함수는 제거되버린다.
window.load = function01;/*무시된다*/ window.load = function02;
하지만jQuery에서는 순서대로 모두 실행된다. 그리고window.load의 경우 다중함수 사용에 해답이 없는건 아니다. addLoadEvent를 사용하면 된다. 아래포스팅을 참조하자
addLoadEvent에 대해서는 이포스팅참조 함수를 여러번 사용할때 쓰는 addLoadEvent
코드 단순화 시키기
복잡한 것은 무슨언어든 삻다 간결하고 짧은것이 쓰기 편할 것이다.가장대표적인예로 $(document).ready()를 단순화 시켜보자
앞서소개했듯이 아래와 같이 사용했다.
$(document).ready(function(){
//코드 삽입 어쩌고 저쩌고
});
단순화 문서를 빼줄수있다.
$().ready(function(){
//코드 삽입 어쩌고 저쩌고
});
또 다음과 같이 단순화 시킬수도 있다.
$(function(){
//코드 삽입 어쩌고 저쩌고
});
이는 묵시적으로 실행되는 것을 단순히 한것이다. 어디까지나 이런식으로 단순화 시킬 수 있다고 설명한것이며 누구나 쉽게 실무에서 함께 볼려면 다 적어주는 것이 좋다 본격적으로 단순화 시키는 것은 다음에 알아보겠다.
댓글