JS 등록/제거 이벤트 핸들러(ExtJS 애플리케이션 설계실습)_javascript 스킬

ExtJS 애플리케이션을 디자인할 때 가장 일반적으로 하는 일은 이벤트 핸들러를 등록하는 것입니다. 왜냐하면 ExtJS의 세계는 거의 전적으로 시간으로 구성되어 있기 때문입니다. 따라서 ExtJS의 디자이너는 이벤트 등록을 매우 쉽게 만듭니다(또한 선택하기 매우 어려운 방법도 제공합니다) - on/un, 즉 위아래로 또는 addListener 및 RemoveListener, 요소는 모든 하위 클래스에서 사용 가능합니다. 예를 들어, 사용자가 클릭할 때 간단한 피드백을 제공하려는

가 있습니다.
;div/> ;마우스 클릭 이벤트를 등록하는 것은 어떻습니까? 먼저 이 div의 Element 인스턴스를 가져와야 합니다.
varhappyDiv=Ext.get('happyDiv')
그런 다음 이벤트 핸들러를 정의합니다.

코드 복사 코드는 다음과 같습니다.

varclickHandler=function(event,eventTarget){
Ext.MessageBox.alert("Click","Youclicked :" eventTarget.id ;

코드는 다음과 같습니다.

happyDiv.on('click',clickHandler);

프로그램이 실행될 때 실행 후

를 클릭하면 그림 3-15와 같은 결과가 나타납니다. 꽤 간단하죠? 샘플 파일은 ch03/event_demo.html입니다. 이 이벤트 핸들러를 제거하려면 on()을 un()으로 변경하면 됩니다. 제거할 때 클릭 이벤트에 해당하는 이벤트 핸들러가 없어도 문제가 되지 않습니다. 기본 EventManager가 자체적으로 판단합니다. 이벤트 핸들러가 호출되면 event, eventTarget 및 optionObj라는 세 가지 매개변수를 받게 됩니다. 예제에서는 세 번째 매개변수만 사용하여 EventManager를 설명합니다. 여기서는 먼저 event와 eventTarget에 중점을 둡니다. 이벤트 유형은 Ext.Event이고 eventTarget은 HTML 요소입니다. 사용자가

를 누르면 브라우저는 클릭 이벤트를 트리거하고 clickHanlder()를 호출합니다. clickHanlder()의 경우 수신된 이벤트는 브라우저에 의해 트리거된 클릭 이벤트입니다. evnetTarget은 이벤트 대상인

이고 eventTarget.id의 값은 "happyDiv"입니다. 이벤트의 루트 클래스는 어디에서 찾아야 합니까? 답변