모던 웹을 위한 JavaScript jQuery 입문 / 한빛미디어

여기는 공부를 하면서...

적는 공간..

    <script>
        window.onload = function () {
            var header = document.getElementById('my-header');

            var handler = function () { alert('클릭'); };
            header.attachEvent('onclick', handler);
            header.detachEvent('onclick', handler);

//함수를 변수에 담아서 해야 함수가 먹는다. 익명함수로 하면 같은 대상으로 여기지 않아 함수가 먹지 않는다. P341 참조
        };
    </script>

 

 

 

표준 이벤트 모델은 웹 표준을 만드는 단체인 W3C에서 공식적으로 지정한 DOM Level 2 이벤트 모델이다.

인터넷 익스플로러 이벤트 모델과 마찬가지로 한 번에 여러 가지의 이벤트 리스너를 추가할 수 있으며, 인터넷 익스플로러 이벤트 모델과 달리 이벤트 캡쳐링을 지원한다.

하지만, 캡쳐링은 사실상 사용하지 않는다.

※ 인터넷 익스플로러 9버전부터 지원(IE8 버전 이하는 표준 이벤트 모델이 동작X)

DOM 레벨 2 이벤트 모델과 이전 버전의 가장 두드러진 차이점은 특정 이벤트 핸들러 프로퍼티에 의존적이지 않다는 점이다. 즉, 하나의 이벤트나 객체에 다수의 이벤트 핸들러를 등록시킬 수 있다. 

addEventListener 구문의 형식은 다음과 같다.

object.addEventListener('event', function, boolean);

 

addEventListener(eventName, handler, useCapture)

removeEventListener(eventName, handler)

 

첫 번째 인자는 click이나 load와 같은 이벤트, 두 번째 인자는 핸들러 함수, 세 번째 인자는 이벤트를 처리하는 방식을 말하는데, 여기에는 케스케이드다운(cascade-down)과 버블업(bubble-up)의 두 가지 방식이 있다. 세 번째 인자에 false값을 주면 이벤트 리스너가 버블업 방식으로 동작하고, true값을 주면 케스케이드다운 방식으로 동작한다.
이벤트 리스너의 제거는 removeEventListener 함수를 사용한다.

 

 

addEventListener와 removeEventListener에 상응하는 IE 메소드는 attachEvent와 detachEvent이다. attachEvent의 형식은 다음과 같다.

object.attachEvent("event", function);

 

// 이벤트 등록
function setup(event) {
   var evtObject = document.getElementById("objectId");
   
   if (evtObject.addEventListener) {
      evtObject.addEventListener("click", handler, false);
   } else if (evtObject.attachEvent) {
      evtObject.attachEvent("onclick", handler);
   } else if (evtObject.onclick) {
      evtObject.onclick = handler;
   }
}

// 이벤트 핸들러
function handler(event) {
   // 이벤트 처리 코드
}

 

 

 

 

 

선언적 함수

가장 널리 사용하는 함수의 종류는 선언적/정적인 형태로 function 키워드, 함수명, 인자 리스트, 함수 몸체로 구성된다. 선언적/정적 함수는 페이지를 로드할 때 단 한 번만 파싱된다. 이 때 파싱된 결과는 함수가 호출될 때마다 사용된다.

function 함수명 (인자1, 인자2, ..., 인자n) {
    // 실행 코드
}

익명 함수

함수도 객체다. 그렇기 때문에 함수도 생성자를 사용해서 생성할 수 있고, 함수를 변수에 배정하는 것도 가능하다.
선언적 함수와는 달리, 자바스크립트 엔진은 익명 함수를 동적으로 생성한다. 따라서 매번 함수가 호출될 때마다 동적으로 생성된다. 반복문에서 사용하면 매번 반복시마다 생성된다.

var variable = new Funtion ("인자1", "인자2", ..., "인자n", "함수 몸체");

함수 리터럴

자바스크립트 객체는 리터럴 형태를 가질 수 있다. 즉 생성자와 객체를 사용하지 않고, 리터럴로 접근할 수 있다. 문자열은 String 생성자를 사용해서 생성할 수 있고, String 메소드로 접근할 수 있다. 문자열의 이런 특성은 함수에서도 가능하다. 즉 함수를 생성해 변수에 할당하기 위해 생성자를 사용할 필요가 없다는 뜻이다. 말 그대로 함수 리터럴(Function Literal)인 것이다.
함수 리터럴은 한 번만 파싱되며 정적이다. 함수명은 지정할 수도 있고, 지정하지 않을 수도 있다. 함수명을 지정한 경우엔 그 함수 내에서만 접근이 가능하다.

var func = function (인자들) {
   // 실행 코드
}