第三篇Extのイベントメカニズム
3919 ワード
jsのイベントは主にブラウザイベントとカスタムイベントの2種類に分けられます.
A.まずExtがどのようにイベントをカスタマイズしたかを見てみましょう
ステップ1:カスタム「クラス」(jsにはクラスの概念がない)を定義し、属性、メソッド、イベントを追加します.
var Person = function(name,age){
//属性
this.name = name;
this.age = age;
//方法
this.eat:function(){
}
//イベントの追加
this.addEvents('walk','eat');
};
ステップ2:クラスにExt.Observable(基本的なイベントメカニズムが定義されている)を継承させ、オブジェクトにイベントリスニングを追加します.
Ext.extend(Person,Ext.util.Observable,{拡張属性とメソッド});
var p = new Person('rzy',20);
p.on('eat',function(e,el,args){},scope,args);
ステップ3:オブジェクトをトリガーするイベント
p.fireEvent('イベント名',パラメータリスト...);
完全なコード:
B.ブラウザイベント(onclick,onmouseover,oncontextmenu,onkeyup...)を見てみましょう.
例をあげましょう
そして、肝心な時が来た.オリジナルjsのイベントメカニズムを見てみましょう.これは、jsフレームワーク(主にブラウザ間の問題を解決する)を学ぶのに役立ちます.
まず、オリジナルjsがどのようにオブジェクトにブラウザイベントを追加するかを見てみましょう(IEとFFを例にとります)
IE:obj.attachEvent('onclick',function(){});
FF:obj.addEventListner('click',function(){},false);
ここでイベントオブジェクトeventについてお話しします
IE:グローバル変数としてwindow.event
FF:イベントがトリガーされた場合、最初のパラメータとして表示する必要があります
Ext:EventObject
例をあげましょう
個人的には上記の伝統的な侵入式のイベント定義方式があまり好きではなく、注記式に変更されました.
document.getElementById('btn').onclick = ff;//ここでバインドされているのは、ff()ではなく、メソッドの参照ffであることに注意してください.
しかし問題はまた原生のjsが単一のバインドしかできないことが現れて、更に1つのクリックイベントをバインドすると前の
このExtは登場して、それは要素のために複数のハンドルを縛ることができて、それはどのようにしてしましたか?イベントメカニズムに関するExtのソースコードを見てみましょう.特に観察者モードです.
A.まずExtがどのようにイベントをカスタマイズしたかを見てみましょう
ステップ1:カスタム「クラス」(jsにはクラスの概念がない)を定義し、属性、メソッド、イベントを追加します.
var Person = function(name,age){
//属性
this.name = name;
this.age = age;
//方法
this.eat:function(){
}
//イベントの追加
this.addEvents('walk','eat');
};
ステップ2:クラスにExt.Observable(基本的なイベントメカニズムが定義されている)を継承させ、オブジェクトにイベントリスニングを追加します.
Ext.extend(Person,Ext.util.Observable,{拡張属性とメソッド});
var p = new Person('rzy',20);
p.on('eat',function(e,el,args){},scope,args);
ステップ3:オブジェクトをトリガーするイベント
p.fireEvent('イベント名',パラメータリスト...);
完全なコード:
var Person = function(name,age){
this.name = name;
this.age = age;
this.eat:function(){
}
this.addEvents('walk','eat');
};
Ext.extend(Person,Ext.util.Observable,{ });
var p = new Person('rzy',20);
p.on('eat',function(){},scope,args);
p.fireEvent(' ', ...);
B.ブラウザイベント(onclick,onmouseover,oncontextmenu,onkeyup...)を見てみましょう.
例をあげましょう
<html>
<head>
<link type="text/css" rel="stylesheet" href="extjs/resource/css/ext-all.css"/>
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script type="text/javascript">
var fn = function(){
Ext.get('btn').on('click',function(e,btn){
alert(' ');
},this,args);
};
Ext.onReady(fn);
</script>
</head>
<body>
<input id="btn" type="button" value=" "/>
</body>
</html>
そして、肝心な時が来た.オリジナルjsのイベントメカニズムを見てみましょう.これは、jsフレームワーク(主にブラウザ間の問題を解決する)を学ぶのに役立ちます.
まず、オリジナルjsがどのようにオブジェクトにブラウザイベントを追加するかを見てみましょう(IEとFFを例にとります)
IE:obj.attachEvent('onclick',function(){});
FF:obj.addEventListner('click',function(){},false);
ここでイベントオブジェクトeventについてお話しします
IE:グローバル変数としてwindow.event
FF:イベントがトリガーされた場合、最初のパラメータとして表示する必要があります
Ext:EventObject
例をあげましょう
<html>
<head>
<link type="text/css" rel="stylesheet" href="extjs/resource/css/ext-all.css"/>
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script type="text/javascript">
var ff = function(e){
var sender= e?e.target:window.event.srcElement;
alert(sender);
};
</script>
</head>
<body>
<input id="btn" type="button" value=" " onclick=ff(e);/>
</body>
</html> 個人的には上記の伝統的な侵入式のイベント定義方式があまり好きではなく、注記式に変更されました.
document.getElementById('btn').onclick = ff;//ここでバインドされているのは、ff()ではなく、メソッドの参照ffであることに注意してください.
しかし問題はまた原生のjsが単一のバインドしかできないことが現れて、更に1つのクリックイベントをバインドすると前の
このExtは登場して、それは要素のために複数のハンドルを縛ることができて、それはどのようにしてしましたか?イベントメカニズムに関するExtのソースコードを見てみましょう.特に観察者モードです.