JavaScript 高度なプログラミング読書ノート (Seventeen) js events

JavaScript 高度なプログラミング読書ノート (Seventeen) js events_javascript スキル

WBOY

リリース： 2016-05-16 17:50:56

オリジナル

1089 人が閲覧しました

1. イベントフロー

IE では、最も具体的なイベントターゲットから最も具体性の低いイベントターゲットまで、バブリングイベントが存在します。
Netscape Navigator は、IE で使用されるバブリングイベントとは逆のキャプチャイベントを使用します。
DOM イベントフローは両方のイベントモデルをサポートしますが、キャプチャイベントが最初に発生します。

2. イベント処理関数/リスニング関数

イベントは、ユーザーまたはブラウザ自体によって実行される特定の動作です。これらのイベントには、クリック、ロード、マウスオーバーなどの独自の名前が付いています。
イベントハンドラーを割り当てるには、JavaScript または HTML の 2 つの方法があります。
JavaScript でイベントハンドラー関数を割り当てる場合は、まず処理対象のオブジェクトへの参照を取得してから、次のように関数を対応するイベントハンドラー関数属性に割り当てる必要があります (イベントハンドラー関数名は小文字である必要があります) ):

コードをコピーコードは次のとおりです:

 
var oDiv=document.getElementById( "div1"); 
oDiv .onclick=function(){ 
alert("クリックされました") 
} 

HTMLでイベント処理関数が割り当てられている場合次に、HTML タグの関数の特性にイベント処理を追加し、次のように適切なスクリプトを特性値として含めます:

コードをコピーコードは次のとおりです。

利用可能な各イベント関数に複数のイベントハンドラーを割り当てるために、IE と DOM はそれぞれ独自のメソッドを提供します。
IE のすべての要素とウィンドウオブジェクトには、attachEvent() と detachEvent() という 2 つのメソッドがあります。名前が示すように、前者はイベントにイベント処理関数をアタッチするために使用され、後者はイベントをデタッチするために使用されます。処理機能。各メソッドは、割り当てるイベントハンドラーの名前と関数という 2 つのパラメーターを取ります。例:

コードをコピーコードは次のとおりです:

 
var fnClick=function() { 
 アラート("クリックされました"); 
} 
var fnClick2=function(){ 
アラート("クリック2"); 
var oDiv=document.getElementById(" div"); 
oDiv.attachEvent("onclick",fnClick); 
oDiv.attachEvent("onclick",fnClick2) 
oDiv.detachEvent("onclick",fnClick); 
oDiv. detachEvent("onclick ",fnClick2); 

 

DOM は、addEventListener() と RemoveEventListener() を使用して、イベント処理関数の割り当てと削除を行います。 IE との違いは、これらのメソッドには 3 つのパラメーターがあり、3 番目のパラメーターはバブリングフェーズとキャプチャフェーズのどちらに使用されるかを識別することです。これは、キャプチャフェーズでは true、バブリングフェーズでは false です。削除時の 3 番目のパラメータは追加時と同じにする必要があります。例:

コードをコピーコードは次のとおりです:

var fnClick=function() { 
 アラート("クリックされました"); 
} 
var fnClick2=function(){ 
アラート("クリック2"); 
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); 

 

3. イベントオブジェクト
イベントオブジェクトは次のとおりです。原因イベントのオブジェクト、イベント発生時のマウス情報、およびイベント発生時のキーボード情報。
位置付け
IEにおけるイベントオブジェクトは、ウィンドウオブジェクトの属性イベントです。イベントハンドラー関数は、次のようにイベントオブジェクトにアクセスする必要があります:

コードをコピーコードは次のとおりです:

oDiv.onclick = function(){

var oEvent=window.event; 
} 

 
DOM 標準では、イベント オブジェクトをイベント処理関数に渡す必要があると規定されています。唯一のパラメータとして。したがって、DOM 互換ブラウザ (Mozilla、Safair、Opera など) でイベント オブジェクトにアクセスするには、次のようにします。 

コードをコピーコードは次のとおりです:

oDiv.onclick=function(){

var oEvent=arguments[0]; 
} 
//または 
oDiv.onclick=function (oEvent) { 
} 


属性メソッドの類似性

 1. イベント タイプを取得します: oEvent.type 
 2. キー コードを取得します: oEvent.keyCode 
 3. Shift、Alt、Ctrl キーを検出します: oEvent。 ShiftKey ;oEvent.altKey;oEvent.ctrlKey; 
 4. クライアントのマウス座標を取得します: oEvent.clientX;oEvent.clientY; 
 5. 画面座標を取得します: oEvent.screenX;oEvent.screenY; 
属性メソッドの違い 

 1. ターゲットを取得します: IE は srcElement を使用し、DOM はターゲットを使用します。 
 2. キーの文字コードを取得します: IE は keyCode を使用し、DOM は charCode と String.fromCharCode を使用します。 
 3. イベントを防ぐデフォルトの動作: IE は oEvent.returnValue=false を使用し、DOM はPreventDefault() メソッドを使用します。 
 4. イベントのバブリングを停止します。IE では oEvent.cancelBubble=true を使用します。 DOM の stopPropagation() ; 


 4. イベントの種類  
 1. マウス イベント 
 マウス イベントには、click、dblclick、mousedown、mouseout、mouseover、mouseup が含まれます。 、およびマウスの移動。 
 イベントのシーケンス: dblclick イベントは、次のイベントをトリガーします: マウスダウン、マウスアップ、クリック、マウスダウン、マウスアップ、クリック、dblclick。 
 2. キーボード イベント 
 キーボード イベントには、キーダウン、キープレス、キーアップが含まれます。 
 イベントのシーケンス: ユーザーが文字キーを 1 回押すと、keydown、keypress、keyup のイベントが連続してトリガーされます。文字以外のキーが 1 回押されると、keydown と keyup のイベントが連続してトリガーされます。 
 3. HTML イベント 
 HTML イベントには、ロード、アンロード、中止、エラー、選択、変更、送信、リセット、サイズ変更、スクロール、フォーカス、ブラーが含まれます。 
 4. 変更イベント 
 変更イベントはすでに DOM 標準の一部ですが、主流のブラウザーはまだそれを実装していません。したがって、ここではそれらのみをリストします。 
 変更イベントには、DOMSubtreeModified、DOMNodeInserted、DOMNodeRemoved、DOMNodeRemovedFromDocument、DOMNodeInsteredIntoDocument が含まれます。 

著者: Artwl 
出典: http://artwl.cnblogs.com