4. 웹에디터로 배우는 자바스크립트 객체지향 프로그래밍 - 에디터 II

앞서 NicEdit 라이브러리 설명 중 

fireEvent에 대하여 간단하게 정리하였다.

여기서는 nicEditorInstance 클래스를 중심으로

보다 상세하게 구현 방법을(사용방법) 정리한다.

정리하기 전에 다음 흐름을 확인하고 넘어간다.

이 장에서 정리한 내용을 그림으로 그린 것으로 

익숙하지 않은 사람에게는 

그림과 정리한 내용을 같이 보는 것이 더 쉬울 수 있다.

먼저, nicEditorInstance 클래스 생성 후

mousedown과 keyup 이벤트 핸들러로 selected를 지정했다. 

var nicEditorInstance = bkClass.extend({     ~~ 생략 ~~     init: function() {         this.elm.setAttribute("contentEditable", "true");         if (this.getContent() == "") {             this.setContent("<br />")         }         this.instanceDoc = document.defaultView;         this.elm.addEvent("mousedown", this.selected.closureListener(this)).addEvent(생략).addEvent("keyup", this.selected.closure(this));         this.ne.fireEvent("add", this)     },     ~~ 생략 ~~

사용자가 편집기에서 동작을 할 때 마다

selected로 받아서 무엇인가를 처리하겠다는 것이다.

selected: function(C, A) {     if (!A && !(A = this.selElm)) {         A = this.selElm()     }     if (!C.ctrlKey) {         var B = this.ne.selectedInstance;         if (B != this) {             if (B) {                 this.ne.fireEvent("blur", B, A)             }             this.ne.selectedInstance = this;             this.ne.fireEvent("focus", B, A)         }         this.ne.fireEvent("selected", B, A);         this.isFocused = true;         this.elm.addClass("selected")     }     return false },

지정된 selected 핸들러의 코드를 보면

특정 변화가 있으면 3가지 이벤트를 발생 시키라고

niceditor에게 요구 한다(fireEvent).

마우스나 키보드를 눌러서 이벤트를 발생 시킨 대상

편집기인 나(this)와 현재 선택되었던 편집기(이전 편집기 - B)가 다르면

이전 편집기(B)에게는 포커스가 나갔다고(blur) 알리고(fireEvent),

이벤트를 발생시킨 나(this)에게는 포커스가 들어왔다고(focus) 알린다(fireEvent),

이것은 사용자가 나(this)를 마우스나 키보드로 클릭했다는 당연한 것을 의미한다.

fireEvent를 niceditor(ne)의 메서드로 호출하는데

bkEvent 클래스에서 상속 받은 메서드이다.

niceditor는 bkClass, bkEvent 클래스에서 상속 받았다.

bkEvent 클래스의 fireEvent에서는

다음 코드와 같이 등록된 이벤트들(eventList)에게

지정된 이벤트를 실행하라고 알림을 준다(apply).

함수를 실행하는 것과 같은데,

this를 해당 개체로 하기 위해 apply를 사용한다.

apply에 대한 자세한 내용은 찾아보길 바란다.

var bkEvent = {     addEvent: function(A, B) {       ~~ 생략 ~~     fireEvent: function() {         var A = bkLib.toArray(arguments),             C = A.shift();         if (this.eventList && this.eventList[C]) {             for (var B = 0; B < this.eventList[C].length; B++) {                 this.eventList[C][B].apply(this, A)             }         }     } };

niceditor에 이벤트를 등록하는 대상들은 모두 버튼들로

편집기가 포커스를 가지면 버튼을 활성화 시키고

편집기가 포커스를 잃으면 버튼을 비활성화 시키는 것이다.

따라서, bkEvent(nicEditor)의 addEvent를 호출하는것은 

nicEditorButton와 nicEditorSelect

그리고 이들로부터 상속 받은 자식들이다.

nicEditorButton 생성자에서 다음 코드를 확인할 수 있다.

파라미터 B는 눈치로 nicEditor(ne)임을 알 수 있다.

선택되면(포커스가 가면 selected) enable함수를 호출하도록,

포커스를 잃으면 disable 함수를 호출하도록 지정하였다.

var nicEditorButton = bkClass.extend({     construct: function(D, A, C, B) {         this.options = C.buttons[A];         this.name = A;         this.ne = B;         this.elm = D;         ~~ 생략 ~~         B.addEvent("selected", this.enable.closure(this)).addEvent("blur", this.disable.closure(this)).addEvent("key", this.key.closure(this));         this.disable();         this.init()     },

nicEditorInstance에서 focus 이벤트가 있었는데,

버튼에서 사용하지 않는다.

버튼에서는 focus 대신에 selected를 사용한다.

focus가 아닌 selected로 사용한 이유는

(이름은 붙이기 나름이지만)

버튼 활성화 외에 현재 선택된 영역의 HTML 태그를 확인하여

해당 버튼을 누른 상태(실행 여부 표시)로

보여 주기 위한 기능(checkNodes)도 있기 때문인 것으로 추측한다.