• 이벤트 속성에 함수를 연결하는 것을 이벤트 바인딩 한다. (Event property, handler, binding)
  • [추가, 연결] 이벤트 속성에 함수(핸들러)를 설정
  • [제거] 이벤트 속성에 초기 값인 null을 대입
// 이벤트 초기 상태 = null
document.onclick

// 이벤트에 함수 연결
document.onclick = function() {
      console.log('clicked');
}

// 이벤트에 함수 제거
document.onclick = null

1회만 클릭 수행.(클릭과 동시에 이벤트 제거)

var doc = document;
var onClick = doc.onclick = function() {
	console.log('clicked');
	document.onclick = null;
}

doc.onclick = onClick;
doc.onclick = onClick(); // 'onClick()'바로 실행이 되므로 오류

문서 객체 제어

1. 표준 방식 VS 비표준 방식

// 표준 방식(Microsoft Non Standard Method) 
var current_fontSize = window.getComputedStyle(h1).fontSize;

// 비표준 방식(Microsoft Non Standard Method)
h1.currentStyle.fontSize;

2. 문서 객체의 스타일 속성 값을 가져와 조작하는 예시 (parseInt() 활용)

var h1_els = document.getElementsByTagName('h1'); // [ <h1> ] Nodelist (노드리스트)
// 수집된 집합(Nodelist) 내에서 대상 객체를 뽑아내야만 제어가 가능하다.
var h1 = h1_els.item(0); // Programming에서는 시작되는 숫자 값이 0부터 이다.

h1.onclick = function() {
	// 클릭하면 h1 참조 객체의 font-size 값을 가져오고자 한다.
	var current_font_size = h1.style.fontSize;

	//표준 방식 : W3C Standard Method
	current_font_size = window.getComputedStyle(h1).fontSize;
	current_font_size = window.parseInt(current_font_size, 10);
	current_font_size = current_font_size - 10;
	h1.style.fontSize = current_font_size + 'px';
};

// 참고로 수집된 집합 자체에 이벤트를 연결하면 동작하지 않는다.
h1_els.onclick = function() {
	console.log('h1_els 변수에 참조된 것은 노드리스트(집합)이기에 이 코드는 작동되지 않는다.');
};

가비지 콜렉터란 메모리 할당을 추적하고 할당된 메모리가 더 이상 필요 없어졌을 때 해제하는 작업을 한다. (할당된 메모리가 더 이상 필요없을 때 해제)