『メンテナンスできるJavaScriptを書く』第七章のまとめを読みます.

第七章事件処理
7.1典型的な使い方
著者らはまず事件を処理する方法を与えた.見た目も似ていませんが、その後の最適化方法は勉強に値するです.

 //      
         function handleClick(event) { var popup = document.getElementById("popup"); popup.style.left = event.clientX + "px"; popup.style.top = event.clientY + "px"; pop.className = "reveal"; } //         ( 5  )
         addListener(element, "click", handleClick);

このコードはイベント対象の2つの属性しか使用できません.clientXとclientYです.要素をページに表示する前に、この2つの属性を使って位置を決めます.
                       このコードは非常に簡単で問題ないですが、実はよくない書き方です.このやり方には限界があります.
 
 7.2ルール1:隔離応用ロジック
まず、このコードのアプリケーションロジックとユーザー行動が混在しています.つまり、このイベントの処理方法とクリックイベントが繋がって結合度が高くなります.
この状況は他の言語でもよく見られます.通常は処理ロジックをカプセル化してコードを再利用することができます.
アプリケーションロジックをすべてのイベントハンドラから引き出すのは一番いい実践です.
 コードを再構築してこうなります.

         //      -       
         var MyApplication = { handleClick: function(event){ this.showPopUp(event); }, showPopUp: function(event) { var popup = document.getElementById("popup"); popup.style.left = event.clientX + "px"; popup.style.top = event.clientY +　"px"; popup.className = "reveal"; } }; addListener(element, "click", function(event) { MyApplication.handleClick(event); })；

 
7.3ルール2:イベントの対象を配布しない
上記のコードには、イベントオブジェクトが無制限に配信されるという問題があります.イベントオブジェクトには、イベントに関する追加情報が多く含まれていますが、このコードはその中の2つだけです.
著者らは二つの理由を提供した.

方法インターフェースは、それらのデータが必要であることを示していません.良いAPIはきっと期待と依存に対して透明である.多くの場合は理想的ではなく、主に第二の点を見ます.

便利テスト

最善の方法はイベントハンドラをイベントオブジェクトでイベントを処理し、必要なすべてのデータをアプリケーションロジックに渡すことです.
コードを再構築します.

         //     
         var MyApplication = { handleClick: function(event){ this.showPopUp(event.clientX,event.clientY); //             
 }, showPopUp: function(x,y) { //           event 
                  var popup = document.getElementById("popup"); popup.style.left = x + "px"; popup.style.top = y +　"px"; popup.className = "reveal"; } }; addListener(element, "click", function(event) { MyApplication.handleClick(event); });

テスト時またはコードの任意の位置でこのロジックを起動しやすいです.

         //        
         MyApplication.showPopUp(10, 10);

 
最後に、イベントを処理する場合は、イベントハンドラをイベントオブジェクトに接触する唯一の関数にすることが望ましい.イベントハンドラは、アプリケーションロジックに入る前にイベントオブジェクトに対して、デフォルトイベントの阻止やイベントの泡立ち防止を含む必要な動作を実行しなければならず、イベントプログラムに直接含まれるべきである.

         //     
         var MyApplication = { handleClick: function(event){ //       DOM Level2
 event.preventDefault(); event.stopPropagation(); //       
                   this.showPopUp(event.clientX,event.clientY); }, showPopUp: function(x,y) { var popup = document.getElementById("popup"); popup.style.left = x + "px"; popup.style.top = y +　"px"; popup.className = "reveal"; } };

このコードでは、MyApple.handleClick()はイベントハンドラであり、したがって、データがアプリケーションロジックに入る前にevent.prevent Default()とevent.stopPropagation()を呼び出し、イベントハンドラとアプリケーションロジックの分業を明らかに示している.アプリケーションロジックはイベントに依存する必要がないので、テストコードを書くことも含めて、多くのところで同じ業務ロジックを簡単に使用することができます.