「JavaScript高級プログラム設計」読書ノート(17):事件

一、事件の流れ
IEでは、バースト型イベント、すなわち、最も特定のイベントターゲットから最も不特定のイベントターゲットまでである.
Netscate Navigatorはキャプチャ型イベントを使用しています.これはIEで採用されているバースト型イベントとは反対です.
DOMイベントフローは2つのイベントモデルを同時にサポートするが、捕獲型イベントが先に発生する.
二、イベント処理関数/モニター機能
イベントは、ユーザまたはブラウザ自身が行う特定の行動です.これらの事件は全部自分の名前があります.例えば、click、load、mouseoverなどです.
イベントハンドラには、JavaScriptまたはHTMLの2つの割り当てがあります.
JavaScriptにイベントハンドラ関数が割り当てられている場合は、まず処理対象の参照を取得して、対応するイベントハンドラ関数属性に関数を付与します.

var oDiv=document.getElementById("div1");

oDiv.onclick=function(){

        alert("I was clicked");

}

HTMLにイベントハンドラ関数が割り当てられている場合は、HTMLタグにイベントハンドラの特徴を追加し、適切なスクリプトを特性値として含めるだけでよい.

<div onclick="alert('I was clicked')"></div>

各利用可能なイベントに複数のイベントハンドラ関数を割り当てるために、IEとDOMは、それぞれ独自の方法を提供する.
IEの各要素とwindowオブジェクトは、2つの方法があります.atachEvent()とdetachEvent()は、名前の通り、前者はイベントにイベントハンドリング関数を付加し、後者はイベントハンドリング関数を分離するために使用されます.各方法には二つのパラメータがあります.割り当てられるイベントハンドリング関数の名前と関数の一つです.例えば:

var fnClick=function(){

      alert("Clicked");

}



var fnClick2=function(){

      alert("Click2");

}



var oDiv=document.getElementById("div");

oDiv.attachEvent("onclick",fnClick);

oDiv.attachEvent("onclick",fnClick2)



oDiv.detachEvent("onclick",fnClick);

oDiv.detachEvent("onclick",fnClick2);

DOMでは、addEventListener()とremoveEveventListener()を用いて、イベント処理関数を割り当てて削除した.IEと違って,これらの方法は3つのパラメータがあり,第3のパラメータ識別はバブル段階または捕獲段階のために用いられる.捕獲段階はtrueで、発泡段階に使うのはfalseです.除去時の3番目のパラメータは追加時と一致します.例えば:

var fnClick=function(){

      alert("Clicked");

}



var fnClick2=function(){

      alert("Click2");

}



var oDiv=document.getElementById("div");

oDiv.addEventListener("onclick",fnClick,false);

oDiv.addEventListener("onclick",fnClick2,false)



oDiv.removeEventListener("onclick",fnClick,false);

oDiv.removeEventListener("onclick",fnClick2,false);

三、事件の対象
イベントオブジェクトには、イベントを引き起こすオブジェクト、イベント発生時にマウスの情報、イベント発生時にキーボードの情報が含まれています.
位置
IEのイベントオブジェクトはwindowオブジェクトの属性イベントです.イベントハンドラは、このようにイベントオブジェクトにアクセスする必要があります.

oDiv.onclick = function(){

      var oEvent=window.event;

}

DOM標準では、イベントオブジェクトは一意のパラメータとしてイベントハンドラ関数に伝達されなければならないという.したがって、DOM対応のブラウザ(Mozila、Safair、Operaなど)でイベントオブジェクトにアクセスすると、

oDiv.onclick=function(){

      var oEvent=arguments[0];

}



//or

oDiv.onclick=function(oEvent){

}

属性方法の類似性
1、イベントタイプを取得する:oEvent.type
2、キーコードを取得する:oEvent.keyCode
3、Shift、Alt、Ctrlキーを検出する:oEvent.shiftKey;oEvent.altKeyoEvent.ctrlKey
4、クライアントのマウス座標を取得する:oEvent.client X;oEvent.client
5、スクリーン座標を取得する:oEvent.screenX;oEvent.screenY
属性の違い
1、獲得目標:IEはsrcele ment、DOMはtargetを使う;
2、キーの文字コードを取得する:IEはkeyCode、DOMはcharCodeとString.from CharCodeを使用する;
3、あるイベントのデフォルト行為を阻止する:IEはoEvent.returnValue=falseで、DOMはprevent Defaultで()方法を使う;
4、停止イベントの泡立ち:IEではoEvent.cancebble=trueを使う.DOMではoEvent.stopPropagation();
四、事件の種類
1、マウスイベント
マウスイベントには、click、dblclick、mousedown、mouseout、mouseover、mouseup、mouseoveが含まれます.
イベントの順番:dblclickイベントは前後して以下のイベントをトリガします.mousewn、mouseup、click、mousedown、mouseup、click、dblclick.
2、キーボードイベント
キーボードイベントには、keydown、keyphes、keyupが含まれています.
イベントの順番:ユーザーがあるキャラクターのボタンを押すと、次のようなイベントが発生します.文字以外のボタンを押すと、次のようなイベントが発生します.
3、HTMLイベント
HTMLイベントは、ロード、unload、abort、error、select、change、submit、reet、resize、scroll、focus、blurを含む.
4、変化事件
変化イベントはすでにDOM標準の一部ですが、まだ主流のブラウザが実現されていません.だからここは列挙するだけです.
変化するイベントは、DOMSbtree Modified、DOMNodeInserted、DOMNodeRemoved、DOMNodeRemoved Froom Dcument、DOMNodeInsteredIntodocumentを含む.