ホームページ > 記事 > ウェブフロントエンド > JavaScript カスタム イベントの概要_JavaScript スキル
JavaScript カスタム イベントの概要_JavaScript スキル
- WBOYオリジナル
- 2016-05-16 17:24:051208ブラウズ
多くの DOM オブジェクトには、div の場合、クリック、マウスオーバーなどのイベントがサポートされており、このイベント メカニズムはクラス設計に大きな柔軟性をもたらします。 Web テクノロジーの発展に伴い、JavaScript を使用してオブジェクトをカスタマイズすることがますます多くなり、作成したオブジェクトにイベント メカニズムを持たせ、イベントを通じて他のオブジェクトと通信することで、開発効率が大幅に向上します。
簡単なイベント要件
イベントはオプションではなく、特定のニーズの下では必要です。非常に単純な要件を例に挙げます。ダイアログは Web 開発ではよく使用されます。各ダイアログには、ダイアログの close メソッドに対応します。コードは次のようになります。
function Dialog(id){
this.id=id;
var that=this;
document.getElementById(id).children[0].onclick=function(){
that.close();
}
}
Dialog.prototype.show=function(){
var dlg=document.getElementById(this.id);
dlg.style.display='ブロック';
dlg=null;
}
Dialog.prototype.close=function(){
var dlg=document.getElementById(this.id);
dlg.style.display='none';
dlg=null;
}
function openDialog(){
var dlg=new Dialog('dlgTest');
dlg.show();
}
このように、ポイントボタンが押されたときにダイアログを開くことができます。ポイントボタンが押されたときにダイアログが表示され、要求が達成されませんでしたが、一般的なダイアログが表示されたときにダイアログが表示される可能性があります。一層灰蒙蒙半透明なケースは、他の場所のポイントをブロックしており、Dialog の実行時にこのケースが取り除かれ、再び動作できるようになります。
本文顶部にページカバーを追加
その追加スタイルです
代码如下:
.pageCover
{
width: 100 %;
高さ:100%;
位置:絶対;
z-index:10;
背景色:#666;
不透明度:0.5;
表示: なし;
}
オープン時の天気表示ページ カバーを使用するには、openDialog メソッドを修正する必要があります
代码如下:
function openDialog(){
var dlg=new Dialog('dlgTest');
document.getElementById('pageCover').style.display='block';
dlg.show();
}
ダイアログが表示された後、灰色の半透明のカバーがページ上のボタンを覆います。この時点では、ダイアログが閉じられたままであるという問題が発生します。コードはありません。非表示にする代わりに、ページ カバーを開いたときにどのように表示されるか、閉じたときにどのように非表示になるかを確認してください。実際には、開始コードは のイベント ハンドラーによって定義されています。ページ ボタン ボタンにページ カバーを表示するメソッドを追加します。これは合理的ですが、Dialog を閉じるメソッドは Dialog コントロールのロジック (コントロールとは程遠いですが) であり、何もする必要はありません。 Dialogのcloseメソッドを変更しても大丈夫でしょうか？とんでもない！理由は 2 つあります。まず、Dialog は定義時にページ カバーの存在を知りません。非表示のページ カバー ロジックが Dialog の close メソッドに記述されている場合、ダイアログは依存します。つまり、ページにページ カバーがない場合、ダイアログはエラーになります。さらに、ダイアログが定義されている場合、特定のページのページ カバー ID は不明です。このように、ダイアログを構築するときにページ カバー ID を渡すだけで十分ですか。 2 つのコントロールには依存関係がなくなり、ページ カバー DIV も ID から見つけることができます。しかし、ユーザーが一部のページではページ カバーをポップアップする必要があり、他のページではポップアップしない場合はどうなるでしょうか。
ここでは、イベントを使用してスキルを披露します。
ダイアログ オブジェクトと openDialog メソッドを変更します。
コードをコピー コードは次のとおりです:
function Dialog(id){
this.id =id;
this.close_handler=null;
var that=this;
document.getElementById(id).children[0].onclick=function(){
that.close ();
if (type of that.close_handler=='function')
}
コードをコピー コードは次のとおりです。function openDialog(){
var dlg=new Dialog('dlgTest'); document.getElementById('pageCover').style.display='block';
dlg.close_handler=function(){
document.getElementById ('ページ カバー ').style.display='none';
}
dlg.show();
dlg.close_handler=function(){
document.getElementById ('ページ カバー ').style.display='none';
}
dlg.show();
Dialog オブジェクト内にハンドルを追加します。閉じるボタンのクリック イベント ハンドラーは、close メソッドの呼び出し後にハンドルが関数であるかどうかを判断し、関数である場合はハンドルを呼び出して実行します。 openDialog メソッドでは、Dialog オブジェクトを作成した後、非表示のページ カバー メソッドにハンドルを割り当てます。これにより、ダイアログが閉じられたときに 2 つのコントロール間の結合が発生せずにページ カバーが非表示になります。この対話プロセスは、イベントを定義する単純なプロセスです (イベント ハンドラーをバインドし、ボタン クリック イベントなどの DOM オブジェクト イベントをトリガーします)。同様の原理があります。
高度なカスタム イベント
上記の小さな例は非常に単純ですが、この単純なイベント処理には多くの欠点があります。
1. 共通性はありません。コントロールを定義する場合は、同様の構造を記述する必要があります
2. イベントバインディングは排他的です。バインドできる close イベント ハンドラーは 1 つだけです。新しいイベント ハンドラーをバインドすると、以前のバインディングが上書きされます。
3. 梱包が十分ではありません。ユーザーが close_handler へのハンドルがあることを知らない場合、イベントをバインドする方法はなく、ソース コードを確認することしかできませんこれらの欠点を 1 つずつ分析してみましょう。最初の欠点は非常によく知られており、オブジェクト指向を使用したことのある学生なら簡単に解決策を考えることができます。2 番目の欠点は、コンテナー (2 次元配列) です。すべてのイベントを均一に管理するために提供されます。欠点 3 の解決策は、イベントを追加/削除/トリガーするための統合インターフェイスをカスタム イベント管理オブジェクトに追加するために、欠点 1 と組み合わせる必要があります。
コードをコピー コードは次のとおりです:
function EventTarget(){
this.handlers={};
}
EventTarget.prototype={
constructor:EventTarget,
addHandler:function( type,handler){
if(typeof this.handlers[type]=='未定義'){
this.handlers[type]=new Array();
}
this.handlers[ type].push(handler);
},
removeHandler:function(type,handler){
if(this.handlers[type] instanceof Array){
varハンドラー=this.handlers[ type];
for(var i=0,len=handlers.length;i if(handler[i]==handler){
handlers.splice(i,1 );
ブレーク;
}
}
}
},
trigger:function(event){
if(!event.target){
イベント。 target=this;
}
if(this.handlers[event.type] instanceof Array){
var handlers=this.handlers[event.type];
for(var i=0, len=handlers.length;i handlers[i](event);
}
}
}
}
function onClose(event){
alert('message:'event.message);
}
var target=new EventTarget();
target.addHandler ('close',onClose);
// ブラウザではイベント オブジェクトの作成を支援できません。 'ページカバーが閉じました!'
};
target.trigger(even );
それぞれの欠点を解決したので、最初の欠点を解決するために継承を適用します。以下は、この継承メソッドが現在 JavaScript で最良の継承メソッドとして認識されているものです。
コードは次のとおりです:
テスト
function EventTarget(){
this.handlers={};
}
EventTarget.prototype={
constructor:EventTarget,
addHandler:function( type,handler){
if(typeof this.handlers[type]=='未定義'){
this.handlers[type]=new Array();
}
this.handlers[ type].push(handler);
},
removeHandler:function(type,handler){
if(this.handlers[type] instanceof Array){
varハンドラー=this.handlers[ type];
for(var i=0,len=handlers.length;i
handlers.splice(i,1 );
ブレーク;
}
}
}
},
trigger:function(event){
if(!event.target){
イベント。 target=this;
}
if(this.handlers[event.type] instanceof Array){
var handlers=this.handlers[event.type];
for(var i=0, len=handlers.length;i
}
}
}
}
addHandler メソッドはイベント処理プログラムを追加するために使用され、removeHandler メソッドはイベント処理プログラムを削除するために使用され、すべてのイベント処理プログラムはプロパティ ハンドラー内で保管管理されます。
のオブジェクトは、ハンドラーのプロパティ内のイベント処理プログラムをパラメータとして使用します。
复制代码代码如下:
function onClose(event){
alert('message:'event.message);
}
var target=new EventTarget();
target.addHandler ('close',onClose);
// ブラウザではイベント オブジェクトの作成を支援できません。 'ページカバーが閉じました!'
};
target.trigger(even );
それぞれの欠点を解決したので、最初の欠点を解決するために継承を適用します。以下は、この継承メソッドが現在 JavaScript で最良の継承メソッドとして認識されているものです。
コードをコピーします コードは次のとおりです。function extend(subType,superType){
varprototype=Object(superType.prototype); prototype.constructor=subType;
subType.prototype=prototype;
コードをコピー
subType.prototype=prototype;
コードをコピー
コードは次のとおりです:
Dialog
最後
これは、特定の時点で相互にやり取りされる場合、オープンダイアログ表示ページのカバーも同様の形式で書き込むことができる、いくつかの欠点を完全に解決します。個別イベントは非常に有用である。各オブジェクトが他のオブジェクトの参照を持っている場合、全体のコードが関連しており、オブジェクトの変更は他のオブジェクトに影響を与える可能性があり、同様に困難が重くなる。