JavaScriptよくあるイベントハンドラの例のまとめ

本論文の実例はJavaScriptにおけるよくあるイベントハンドラをまとめたものである.皆さんに参考にしてあげます.具体的には以下の通りです.
イベントとは、使用者またはブラウザ自身が実行するある動作(イベントをクリックするなど)を意味します.これらのイベントに応答する関数をイベントハンドラといいます.イベントハンドラの名前は「on」をプレフィクスとしています.例えば、clickイベントのイベントハンドラは「onclick」です.
1 HTMLイベントハンドラ
ある要素がイベントをサポートしている場合、対応するイベントハンドラと同名のHTML属性があります.この属性でJSを指定できます.

ここのスクリプトはHTML要素の属性に埋め込まれているので、シングルクォーテーションマークを使いました.
ページの他の場所で定義されたスクリプトを呼び出すこともできます.

  function showMessage() {
    console.log("Hello World!");
  }

イベントハンドラのコードは実行時にグローバルスコープ内の任意のコードにアクセスできます.
このように指定されたイベントハンドラは、要素属性値をカプセル化した関数を作成します.ローカル変数イベントがあります.イベントオブジェクトです.

イベント変数により、イベントオブジェクトに直接アクセスすることができます.この関数の内部では、this値はイベントのターゲット要素に等しくなります.

この動的に作成された関数により,その作用領域を拡張できた.この関数の内部では、documentおよびその要素自体のメンバーにアクセスできます.この関数は、withを使ってスコープを拡張します.

function(){
  with(document){
    with(this){
      //     
    }
  }
}

したがって、イベントハンドラでは、自分の属性にアクセスするのが簡単になります.

現在の要素がフォーム入力要素である場合、フォーム要素(親要素)にアクセスするエントリもスコープに含まれますので、この関数はこうなるべきです.

function(){
  with(document){
    with(this.form){
       with(this){
        //     
       }
    }
  }
}

このようにイベントハンドラはフォーム要素を参照する必要がなく、直接フォームの中の他のフィールドにアクセスできます.O(∩∩)O~:

HTMLで直接イベントハンドラを指定すると、これらの欠点があります.

時差問題――関数がページの一番下に定義されていると仮定し、ユーザーがページでこの関数を解析していない場合、ボタンをクリックしたらエラーが発生します.したがって、多くのHTMLイベントハンドラはtry-catchブロックに実装されます.

イベントハンドラのスコープを拡張し、異なるブラウザで結果が異なる場合があります.

HTMLはJavaScriptコードと密接に結合されている.イベントハンドラを修正するには、二つのところを修正する必要がありますので、多くの開発者はJavaScriptを使ってイベントハンドラを指定します.

2 DOM 0レベルイベントハンドラ
イベントハンドラの属性に関数を割り当てることで、イベントハンドラを指定します.この方法を使うには、まず操作対象の引用を取得しなければなりません.
各要素(windowとdocumentを含む)は自分のイベントハンドラの属性を持っています.それらは普通は小文字で、例えばonclickです.属性の値を関数に設定し、イベントハンドラを指定します.
DOM 0レベルのイベントハンドラは要素の作用領域で動作します.したがって、プログラム中のthisは現在の要素を参照します.

  

  var btn = document.getElementById("myBtn");
  btn.onclick = function () {
    console.log(this.id);//myBtn
  }

要素の属性と方法は、thisを介してアクセスできます.DOM 0レベルのイベントハンドラは、イベントフローの発泡段階で処理されます.
このように指定されたイベントハンドラを削除することもできます.

btn.onclick = null; //           

注意:HTMLで指定されたイベントハンドラを使用すると、onclick属性の値は同じ名前のHTML特性に指定されたコード関数を含んでいます.該当する属性をnullに設定し、このように指定されたイベントハンドラを削除することもできます.
3 DOM 2レベルイベントハンドラ

addEvent Listener():イベントハンドラを指定します.

removeEventListener():イベントハンドラを削除します.

すべてのDOMノードはこの2つの方法を含む.これらは3つのパラメータを受け入れます.処理するイベント名、イベントハンドラ関数、ブール値です.最後のパラメータがtrueであれば、キャプチャ段階でイベントハンドラを起動することを表します.falseであれば、泡立ち段階でイベントハンドラを呼び出すという意味です.
DOM 2レベルのイベントハンドラは、複数のイベントハンドラを簡単に追加できます.

var btn = document.getElementById("myBtn");
btn.addEventListener("click", function () {
  console.log(this.id);
}, false);
btn.addEventListener("click", function () {
  console.log("Hello world!");
}, false);

これらのイベントハンドラは、それらを追加する順序でトリガされます.addEventListener()によって追加されたイベントハンドラはremoveEventListener()を使って除去するしかないです.削除時に入ってきたパラメータは、追加時のパラメータと同じでなければなりません.これは、addEventListener()によって追加された匿名関数が除去されないことを意味する.

var handler = function () {
  console.log("Hi deniro");
};
btn.addEventListener("click", handler, false);
btn.removeEventListener("click", handler, false);//    

ほとんどの場合、イベントハンドラをイベントフローの発泡段階に追加します.これにより、ブラウザと最大限に互換できるようになります.特に必要でない場合は、イベントキャプチャ段階でイベントハンドラを登録しないでください.
注意:IE 9、Firefox、Safari、Chrome、OperaはDOM 2レベルのイベントハンドラをサポートします.
4 IEイベントハンドラ
IEは、DOMと同様の方法を実現する.attachEvent()およびdetachEvent().これらは二つのパラメータを受け取ります.イベントハンドラの名前とイベントハンドラの関数です.IE 8および初期バージョンはイベントバブルのみをサポートしているので、attachEvent()を使用して追加されたイベントハンドラはバブル段階に追加されます.
ボタンにイベントハンドラを追加します.

var btn = document.getElementById("myBtn");
  btn.attachEvent("onclick", function () {
});

IEのattachEvent()とDOM 0レベルの方法の違いは、イベントハンドラのスコープが異なることである.DOM 0レベルの方法では、イベントハンドラはその属する元素の作用領域内で実行されます.attachEvent()を使用すると、イベントハンドラはグローバルスコープで実行されますので、thisはwindowに等しいです.

var btn = document.getElementById("myBtn");
btn.attachEvent("onclick", function () {
  console.log("Clicked");
  console.log(this === window);//true;this       
});

一つの要素に複数のイベントハンドラを追加することもできます.

var btn = document.getElementById("myBtn");
btn.attachEvent("onclick", function () {
  console.log("Clicked");
  console.log(this === window);//true;this       
});
//IE10                  
btn.attachEvent("onclick", function () {
  console.log("Hello world!");
});

IE 8および以前のバージョンは、それらを添加する逆の順序で行われ、IE 9はこの問題を修復した.
追加されたイベントハンドラはdetachEvent()によって除去することができますが、同じパラメータを提供しなければなりません.したがって、匿名関数で追加されたイベントハンドラも除去できません.同じ関数に対する参照をパラメータとして使用できる限り、追加したイベントハンドラを削除できます.

  

  var btn = document.getElementById("myBtn");
  var handler = function () {
    console.log("Clicked");
  }
  btn.attachEvent("onclick", handler);
  btn.detachEvent("onclick", handler);

注意:IEとOperaは、IEイベントハンドラをサポートしています.
5ブラウザをまたぐイベントハンドラ
能力測定を適切に運用すれば、ブラウザをまたぐイベントハンドラが作成されます.

var EventUtil = {
  /**
   *     
   * @param element       
   * @param type     
   * @param handler       
   */
  addHandler: function (element, type, handler) {
    if (element.addEventListener) {
      element.addEventListener(type, handler, false);
    } else if (element.attachEvent) {
      element.attachEvent("on" + type, handler);
    } else {
      element["on" + type] = handler;
    }
  },
  /**
   *     
   * @param element       
   * @param type     
   * @param handler       
   */
  removeHandler: function (element, type, handler) {
    if (element.removeEventListener) {
      element.removeEventListener(type, handler, false);
    } else if (element.detachEvent) {
      element.detachEvent("on" + type, handler);
    } else {
      element["on" + type] = null;
    }
  }
}

このように使う:

  


  var btn = document.getElementById("myBtn");
  var handler = function () {
    console.log("Clicked");
  }
  EventUtil.addHandler(btn, "click", handler);
  EventUtil.removeHandler(btn, "click", handler);

もう一つは、DOM 0級は事件ごとに一つの事件処理プログラムだけをサポートしています.幸い、今はDOM 0級事件処理プログラムだけをサポートしているブラウザはほとんどないので、心配しなくてもいいです.
もっと多くのJavaScriptに関する内容に興味がある読者は、当駅のテーマを見ることができます.「JavaScript事件関連操作と技巧大全書」、「JavaScript操作DOM技巧まとめ」、「JavaScriptページ要素操作技術まとめ」、「JavaScriptデータ構造とアルゴリズム技術のまとめ」「JavaScriptエラーとデバッグテクニックのまとめ」
本論文で述べたように、JavaScriptプログラムの設計に役に立ちます.