2012. 12. 03. 학습일지(3장-01)

3장은 이벤트 처리와 관련된 내용을 학습합니당.

이벤트 처리란 jQuery 코드가 원하는 시점에 수행되게 하는 것!

페이지 로드 시점에 작업 수행하기

페이지가 로드될 때 작업을 수행하게 하는 이벤트에는

1. $(document).ready() : DOM이 로드돼 사용할 준비가 끝나는 시점에 바로 호출. DOM 트리로 파싱되자마자 되기 때문에 다른 관련 파일(이미지 등)을 내려 받은 완료 상태와 상관없이 실행. (이미지와 높이와 너비 같은 속성을 항상 사용할 수 있는 건 아니라는!)

2. window.onload : 모든 도큐먼트를 브라우저로 완전히 내려받은 뒤 발생. 모든 요소에 접근 가능.

가 있습니다.

한 페이지에 여러 스크립트 사용하기

• window.onload = doStuff; 하고 또 window.onload = doStuff2; 하면 처음 줄은 제거됨.
• .onload 속성은 오로지 하나의 함수만 저장 가능
• $(document).ready() : 여기에서 호출해 추가한 함수는 모두 내부의 큐에 추가되어 페이지가 로드될 때 등록된 모든 함수를 순서대로 실행

※ 함수의 참조 vs 호출

• 함수를 핸들러에 할당할 때 괄호는 제외하고 함수 이름만 사용해야 함.
• 괄호가 있으면 함수가 즉각 호출
• 괄호가 없으면 참조만 하고 나중에 이 참조를 통해 사용 가능

※ 아래 두 코드는 같은 코드

$(document).ready(function() {      // ... });

$(function() {      // ... });

.ready() 콜백 함수에 인자 넘기기

• 여러 라이브러리 사용시 $ 식별자 충돌 막으려면
• jQuery.noConflict(); 을 호출하여 $에 대한 제어권을 놓아줌
• 그러면 이제 $(document).ready() 가 아니라 jQuery(document).ready()라고 써야함
• 하지만 콜백 함수는 jQuuery 객체 자체를 인자로 받을 수 있음
• jQuery(document).ready(function($) { ... }); = jQuery(function($) { ... });
• 이러면 내부에서도 $ 사용 가능!! 꺄!!

기본 이벤트

.bind() 메서드

• DOM 이벤트에 행위자를 할당하는 역할

$(document).ready(function() {

   $('#switcher-large').bind('click', function() {

      $('body').addClass('large');

   });

});

• 이러면 click 이벤트에 해당 function 할당ㅋ

이벤트 핸들러 컨텍스트

• 이벤트 핸들러가 실행되는 동안 사용할 수 있는 키워드 this
• 핸들러가 연결된 DOM 요소를 가리킴!!
• $() 함수가 DOM 요소를 인자로 받을 수 있다는 사실 -> $(this)를 사용하여 핸들러 연결된 DOM 요소에 이벤트 추가ㅋ

※ 리팩토링

• 기존 코드와 같은 작업을 수행하면서 좀 더 효과적인 방식으로 수행되게 코드를 개선하는 것을 의미
• 리팩토링 잘하고 싶다 ㅎㅎㅎ

간소화된 이벤트

• bind()와 같은 기능을 하면서도 짧게 기술!
• .bind('click',function() { ... }); = .click(function() { ... } );
• 그 외 : blur, change, dbclick, error, focus, keydown, keypress, keyup, load, mousedown, mousemove, resize, scroll, select .... 등등ㅋ