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

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

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。