JS登録・削除イベントハンドラ（ExtJSアプリケーション設計演習）

JS登録・削除イベントハンドラ（ExtJSアプリケーション設計演習）_JavaScriptスキル

WBOY

リリース： 2016-05-16 17:34:27

オリジナル

1179 人が閲覧しました

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 の 3 つのパラメーターを受け取ります。この例では 3 番目のパラメーターのみが使用されます。EventManager について説明します。ここではまず、event とeventTarget に注目します。イベントのタイプは Ext.Event で、eventTarget は HTML 要素です。ユーザーが

を押すと、ブラウザはクリックイベントをトリガーし、clickHanlder() を呼び出します。clickHanlder() の場合、受信されるイベントはブラウザによってトリガーされたクリックイベントです。 evnetTarget はイベントターゲット (

) で、eventTarget.id の値は「happyDiv」です。イベントのルートクラスについては、どこを探せばよいでしょうか?答え