JavaScript MVC学習ノート(五)イベントの基本操作

イベントはJavaScriptアプリケーションの核心であり、すべてのコンテンツの駆動である.その後、W 3 Cはこれを標準化したが、IEは、IE 9が標準に従うまで、W 3 Cと互換性のないイベントモデルを使用することを堅持した.jQueryやPrototyeのようなクラスライブラリは互換性の問題をうまく処理し,イベントを実現するために対外的に統一されたAPIを提供している.
イベントのリスニング
バインドイベントリスニングの関数はaddEventListener()で、type(clickなど)、listener(callbackなど)、seCaptureの3つのパラメータがあります.最初の2つのパラメータを使用して、特定のイベント(クリックなど)がトリガーされたときに実行されるDOM要素に関数をバインドします.

var button = document.getElementById("createButton");
button.addEventListener("click", function(){ /* ... */ }, false);

removeEventListener()を使用して、addEventListener()への送信と同様に、イベントリスニングを除去することができる.リスニングされた関数が匿名の関数である場合、この要素を破棄しない限り、このリスニングは削除できません.

var div = document.getElementById("div");
var listener = function(event) { /* ... */ };
div.addEventListener("click", listener, false);
div.removeEventListener("click", listener, false);

listener関数を持ち込む1番目のパラメータはeventオブジェクトであり、event象によってタイムスタンプ、座標、イベントホスト要素などのイベントに関する情報を得ることができる.同様に、イベントのバブルを停止し、イベントのデフォルトの動作を阻止するための多くの方法が含まれています.
異なるブラウザでは、イベント・タイプのサポートに違いがありますが、すべての現代ブラウザでは、これらのイベントがサポートされています.

click

dblclick

mousemove

mouseover

mouseout

focus

blur

change(フォーム入力ボックス特有)

submit(フォーム固有)

イベントの順序
ノードとその親ノードが同じイベントタイプのコールバックをバインドしている場合、イベントがトリガーされたときにどのコールバックが先に実行されますか?
ブラウザによってデフォルトの実行順序が異なります.

イベントスナップ(capturing)は、最上位の親ノードからイベントをトリガーし、外部から内部へ伝播します.

イベントバブル(bubbling)は、最内層のノードからイベントをトリガし、最上位ノードまで段階的にバブルし、内向外から伝播する.

W 3 Cは、両方のイベントモデルのサポートを標準仕様に盛り込む.W 3 C型によれば,イベントはまずターゲット要素に捉えられ,次いで上へ泡が立つ.
登録するイベントハンドラの呼び出しタイプは、addEventListener()に第3のパラメータuseCaptureを入力することによって、自分で選択して、キャプチャまたはバブルを設定することができる.addEventListener()の最後のパラメータがtrueである場合、イベントハンドラはスナップモードでトリガーされる.falseの場合、イベントハンドラはバブルモードでトリガーされます.

//          false，       
button.addEventListener("click", function(){ /* ... */ }, false);

ほとんどの場合、バブルモードが使用され、これが不確定であれば、addEventListener()`の最後のパラメータにfalseを入力することができる.
イベントバブルのキャンセル
イベントバブルの場合、stopPropagation()の数でバブルを終了することができ、この関数はeventオブジェクトの方法である.たとえば、このコードでは、親ノードのイベントコールバックはトリガーされません.

button.addEventListener("click", function(e){
    e.stopPropagation();
    /* ... */
}, false);

jQueryはまた、stopImmediatePropagation()関数をサポートし、これらのイベントが同じノード要素に登録されている場合でも、後続のすべてのイベントのトリガを阻止します.
ブラウザのデフォルト動作をブロック
ブラウザはイベントにデフォルトの動作を付与します.たとえば、リンクをクリックすると、ブラウザのデフォルトの動作は新しいページをロードし、チェックボックスをクリックするとブラウザが選択(または選択解除)します.これらのデフォルトの動作は、イベント伝播フェーズ(その後)でトリガーされ、いずれのイベントハンドラでもデフォルトの動作をブロックできます.デフォルトの動作は、eventオブジェクトのpreventDefault()関数を呼び出すことによって阻止することもできるし、コールバックでfalseを返すことによっても同様の効果を達成することができる.

bform.addEventListener("submit", function(e){
    /* ... */
    return confirm("Are you super sure?");
}, false);

呼び出しconfirm()がfalse(ユーザがダイアログボックスのキャンセルボタンをクリックした)に戻ると、このイベントコールバック関数はfalseに戻り、イベントがキャンセルされ、フォームのコミットがブロックされます.
(公開記録学習JS MVC、どれくらい続けられるか分からない==.『MVCベースJavaScript webリッチアプリケーション開発』を主な学習資料とする.)