Webのイベント処理

JAvascript処理イベント
イベントの種類

基本イベント(フォーム、window、キーボード、マウス)

HTML 5イベント(ネットワーク、通信、ドラッグ、履歴など)

モバイルデバイスイベント

カスタムイベント

イベントプロセッサの登録
まず要素オブジェクトelementを取得

element.onEvent=handler; このような登録は1つのプロセッサしか登録できないが、優先度が最も高く、最初に

を処理する.

element.addEventListener(eventName,handler,bool); bool値はイベントプロセッサ登録かキャプチャプログラム登録かを決定し、両者の違いは呼び出しの順序が異なり、falseの場合はプロセッサであり、下から上へ泡が出て呼び出し、trueはキャプチャ登録であり、上から下へ親要素のプロセッサを呼び出すまで、つまり私が登録したキャプチャプログラムは私の子要素がイベントが発生したときに呼び出される.イベントプロセッサが実行する順序は、登録順です.

element.attachEvent('onEventName',handler); これは複数のプロセッサを定義することができますが、実行の順序は必ずしもそうではありませんので、ほほほ.の

イベント処理のプロセス
実行環境
一般的にイベント処理関数のthisはイベントターゲット(個人的には登録された要素オブジェクトだと思います)を指しますが、attach定義ではwindowを指します
アクティブドメイン
すべてのjavascript関数と同様に、閉パッケージ特性に従い、その役割ドメインは定義時の役割ドメインです.しかし、第1の方法で定義するとグローバル変数にアクセスできるトップクラスの関数に変換されるが、open関数のようにwindowと書く.open.
戻り値
falseを返すことでデフォルトの操作を否定
伝播

は一般的にwindowまで泡を立てて伝播するが、処理は3つの段階に分けられ、まず捕獲され、その後プロセッサを実行し、さらに上へ伝播し、このようなプロセス

を順次繰り返す.

focus,scroll,blurイベントは例外であり、loadイベントがdocumentationオブジェクトに伝播して停止し、ドキュメント全体のロードが完了するとwindowのプロセッサが実行されます.

プロセッサでstartpropagation関数を使用することによって伝播を阻止するが、本要素で定義されたプロセッサは実行され、preventDefault関数を使用してデフォルトの操作

を阻止することができる.
jquery処理イベント
jqueryイベントプロセッサ

jqueryのイベントハンドラは、通常、jqueryイベントオブジェクトである1つのパラメータ(必ず最初のパラメータ)しかありません.

jqueryプロセッサのthisは対応するhtml要素を指し、jqueryオブジェクトに変換する必要があります.次の例

を参照してください.

$("p").click(function(){
    $(this).css({background,#555555});  
});

jqueryプロセッサの戻り値は常に意味があり、falseを返すとstopPropagationとpreventDefaultが呼び出されたように、イベントのデフォルトの動作と次のバブル伝播が停止する.

複数のパラメータを入力するには、trigger関数を使用してイベントを明示的にトリガーする必要があります.

jqueryイベントオブジェクト
jqueryイベントの詳細が含まれており、data属性やpreventDefaultなどのNB属性が多く定義されています.
jquery登録
単純登録

$(".sign").click(handler);
//jquery  .       (   );
//  ，     
$(selector).hover(f,g);
//             
$(selector).toggle(f1,f2,f3...);
// i     fi

高度な登録

$('a').on('mouseover mouseleave',handler);
$('a').on({
    mouseover:f,
    mouseleave:g
});
$('a').on('mouseover',{sb:6},handler);
//          
$(parent).on(name,childSelector,{sb:6},handler);
//        
//       jquery     data   
//one     on  ，       ，     

イベントのログアウト

$(selector).off('EventName');
//          
$(selector).off(jquery  );
$('a').off({
    mouseover:f,
    mouseleave:g
});//       

イベントトリガ

$('a').click();
//$(selector).SimpleEventName();         addEventListener attachEvent      
$(selector).trigger(EventName,[args]);
//triggerHandler                  
$(selector).live(Name,handler)
//                  ，   die，     bind unbind

Angular処理イベント
イベントの発生と伝播
基本イベント
Angularは一連の基本イベントを定義し,多くはng−××の形式と$××を選択します.
カスタムイベント

$scope.$emit('name','args');
//     $rootScope
$scope.$broadcast('name','args');
//           scope

前回ブログで$rootScopeにアクセスする変数は異なるcontrollersを通信させることができると言いましたが、共有データ通信を採用するのは正統ではなく応答性に欠けており、イベントを採用するのもcontrollers通信の良い方法でしょう.
イベントプロセッサの登録

htmlでng-clickなどのバインド処理関数

を介して

$scope.$on('name',handler);

$scope.$watch(variable-name,handler); watchはng-modelにバインドされた変数を監視し、それらが変化するとwatchで定義されたプロセッサ関数を呼び出し、Angularはwatchキューを維持し、ブラウザがイベントを受信すると$digestはこのキューを検視し、変化が発見されるとdomを更新し、ページの対応する場所を変更するが、$digestはangular contextに入ったイベントを検視するのに$scope.$apply()はdigest操作

を強制します.

はjquery方式でangularに登録する.element(CSSセレクタ)は、jqueryオブジェクトを取得し、jqueryのように

を登録することができる.
詳細な例は、$watch,$apply,$digest---データバインドプロセスangularjsのイベント$broadcast and$emit and$onを理解する2つの文章を参照してください.