JSイベントバインディング_JavaScriptスキルの深い理解

1. 伝統行事モデル

従来のイベント モデルには制限があります。

インライン モデルは HTML タグ属性の形式で使用され、HTML と混合されます。この方法は間違いなく変更や拡張の問題を引き起こすため、現在ではほとんど使用されていません。

スクリプト モデルは、イベント処理関数を js ファイルに書き込み、ページから要素を取得し、対応するイベント関数をバインドして実行をトリガーします。しかし、欠点もあります:

1. イベントは複数のイベント リスニング関数にバインドされており、後者は前者をオーバーライドします。

2. 繰り返しのバインディングを制限する必要がある状況

3. 標準化されたイベント オブジェクト

2. モダンなイベント バインディング

DOM2 レベルのイベントは、イベントを追加および削除するための 2 つのメソッド、addEventListener() と RemoveEventListener() を定義します。これらはそれぞれ、イベント名、関数、バブリングまたはブール値のキャプチャ (true はキャプチャを意味し、false はバブルのリスクを意味します) の 3 つのパラメータを受け取ります。

同様に、IE には、attachEvent() と detachEvent() という 2 つの同様のメソッドが用意されていますが、IE の 2 つのメソッドには別の問題があります。つまり、this オブジェクトを渡すことができません (IE では、call メソッドを使用できます)。オブジェクトの偽装:

function addEvent(obj,type,fn){ 
if(typeof obj.addEventListener != 'undefined'){ 
obj.addEventListener(type,fn,false); 
}else if(obj.attachEvent != 'undefined'){ 
obj.attachEvent('on' + type,function(){ 
fn.call(obj,window.event); 
}); 
} 
};

しかし、追加時に匿名関数が実行されるため、追加後に削除することができず、また、IE が提供する方法では、バインディング イベントを連続的に実行できず、メモリ リークが発生するという問題が発生します。

この一連の問題を解決するには、メソッドをさらにカプセル化する必要があります。他のブラウザでは DOM2 レベルの標準を使用し、IE では従来のモードに基づいて追加と削除を使用します。 >

1. 追加では、オブジェクト イベントを格納するために JS ハッシュ テーブルを使用し、追加された呼び出し順序に従って、最初に同じ処理関数が存在するかどうかを判断し、存在しない場合はイベントを順番にバインドします。 . 関数がハッシュ テーブルに追加されるため、連続して実行できず、繰り返し追加される問題が解決されます

2.削除する際はトラバーサル関数の一致を判定し、存在する場合は削除します

概要:

私はこれまで JS イベント バインディングについて深く理解しておらず、従来のイベント バインディング モデルに留まっており、今回はカプセル化について学ぶことができてとても勉強になりました。 JS 上のオブジェクト指向アプリケーション。 JQuery に似た JS ライブラリは、データ バインディング メカニズムの優れたカプセル化効果を実現していますが、それを知っているだけで、その理由がわからないまま、具体的な実装を直接分析することはできません。突然悟ったような気分になるとともに、互換性があり汎用性の高いプログラムを作成するには、多くの内容を検討し、多くの問題を解決する必要があることにも気づき、これらの問題が徐々に明確になってきます。