JavaScriptアドバンスプログラミングイベント学習ノート_JavaScriptスキル-jsチュートリアル-php.cn

第 12 章イベント
1. イベントフロー
1.1 イベントバブリング (IE イベントフロー)
□イベントバブリング (イベントバブリング)、つまり、イベントは (ドキュメント内の) 最も具体的な要素から始まります。最も深いネストレベルを持つノード) がそれを受け入れ、それをより具体性の低いノード (ドキュメント) に伝播します。
□すべてのブラウザはイベントバブリングをサポートしています。 Firefox、Chrome、および Safari は、イベントをウィンドウオブジェクトまでバブルします。
1.2 イベントキャプチャ (Netscape イベントストリーミング)
□ 特定度の低いノードはイベントを早く受信し、特定のノードは最後にノードを受信します。
□Safari、chrome、Opera、Firefoxでサポートされていますが、キャプチャはウィンドウオブジェクトから始まります(DOM2レベルの仕様はドキュメントから始まります)。
1.3DOM イベントフロー
□ 「DOM2 レベルのイベント」で指定されるイベントフローには、イベントキャプチャステージ、ターゲットステージ、イベントバブリングステージの 3 つのステージが含まれます。
□DOM2: キャプチャフェーズには実際のターゲットは含まれず、イベントターゲットも含まれず、イベントを傍受する機会のみが提供されます。
□Safari、chrome、Firefox、Opera9.5 以降では、キャプチャフェーズ中にイベントオブジェクトでイベントがトリガーされます。結果として、ターゲット上でイベントを操作する機会が 2 つあります。
□IE は DOM イベントストリーミングをサポートしていません。その他のサポート。
2. イベントハンドラー (またはイベントリスナー)
定義: イベントに応答する関数。
2.1 HTML イベントハンドラー
□ 要素でサポートされる各イベントは、対応するイベントハンドラーと同じ名前の HTML 属性を使用して指定できます。
□機能コード文字は HTML エスケープする必要があります。
□ 問題点:
◇時差の問題: イベントがトリガーされたときに、イベントハンドラーにまだ実行条件が設定されていない可能性があります。エラーが表面化しないように、try-catch ブロックのカプセル化を使用します。

◇HTML は JavaScript コードと密接に結合しています。
2.2 DOM レベル 0 イベントハンドラ
□DOM レベル 0 イベントハンドラ: イベントハンドラ属性に関数を割り当てます。長所: シンプルでクロスブラウザ。
□ イベントハンドラーのこのメソッドは、コードが実行されるまでイベントをバインドしません。
□ DOM レベル 0 メソッドを使用して指定されたイベントハンドラーは、要素のメソッドとみなされます。イベントハンドラーは、プログラム内の要素のスコープ内で実行され、現在の要素を参照します。
□DOM0 レベルのイベントの削除: btn.onclick = null; //イベントハンドラーの削除
2.3 DOM2 レベルのイベントハンドラー
□addEventListener() および RemoveEventListener()。処理されるイベントの名前、イベントハンドラーとしての関数、およびブール値の 3 つのパラメーターを受け入れます。
◇最後のブール値が true の場合、イベントハンドラーがキャプチャフェーズで呼び出されることを意味し、false の場合、イベントハンドラーがバブリングフェーズで呼び出されることを意味します。
Var btn = document.getElementById("myBtn");
Btn.addEventListener("click",function(){alert(this.id);},false);
□ DOM レベル 2 を使用します。メソッドイベントハンドラーを追加する主な利点は、複数のイベントハンドラーを追加できることです。追加順にトリガーされます。
□addEventListener() を通じて追加されたイベントハンドラーは、removeEventListener() を使用してのみ削除できます。削除時に渡されるパラメーターは、ハンドラーの追加時に使用されるものと同じです。つまり、匿名関数は削除できません。
□互換性を最大限に高めるために、イベントハンドラーをバブリングフェーズに追加します。
□Firefox、Safari、Chrome、Opera は DOM2 レベルのイベントハンドラーをサポートしています。 IE はこれをサポートしておらず、独自のイベントハンドラーを持っています。
2.4 IE イベントハンドラー。
□ IE の DOM2 と同様のメソッド:attachEvent() および detachEvent()。どちらのメソッドも、イベントハンドラー名とイベントハンドラー関数という同じ 2 つのパラメーターを受け入れます。
□IE はバブリングのみをサポートしており、attachEvent() によって追加されたイベントハンドラーはバブリングフェーズに追加されます。
attachEvent() のイベント処理関数はグローバルスコープで実行されるため、これは window と同等です。
□attachEvent() は、要素に複数のハンドラーを追加して、逆の順序でトリガーすることもできます。
□attachEvent()イベントはdetachEvent()で削除できますが、匿名関数は削除できません。
2.5 クロスブラウザーイベントハンドラー
var EventUtil = {
addHandler : function(element, type, handler){
if(element.addEventListener){
element.addEventListener(type ,handler) ,false);
}else if(element.attachEvent){
element.attachEvent("on" タイプ, ハンドラー);
}else{
elmenet["on" タイプ] = ハンドラー;
}
],
removeHandler : function(element, type, handler){
if(element.removeEventListener){
element.removeEventListener(type, handler, false); }else if(element.detachEvent){
element.detachEvent("on" type, handler);
}else{
element["on" type] = null; }
};
□この互換機能は、IE のスコープ問題など、ブラウザーのすべての問題を考慮しているわけではありません。
3. イベントオブジェクト
定義: DOM 内のイベントがトリガーされると、イベントオブジェクトイベントが生成されます。このオブジェクトには、イベントに関連するすべての情報が含まれます。
3.1 DOM 内のイベントオブジェクト
① DOM 互換ブラウザは、イベントオブジェクトをイベントハンドラー (DOM レベル 0 または DOM レベル 2) に渡します。 HTML 属性で指定すると、イベント変数はイベントオブジェクトを保持します。
②全てのイベントオブジェクトには以下の属性/メソッドが含まれます。 P291
□bubbles: イベントがバブルするかどうかを示します (ブール値)。
□cancelable: イベントのデフォルトの動作をキャンセルできるかどうかを示します (ブール値)。
□currentTarget: イベントハンドラーが現在イベントを処理している要素。
□detail: イベントに関する詳細。
□eventPhase: イベントハンドラーが呼び出される段階: 1. キャプチャ 2. ターゲット上 3. バブリング。
□preventDefault(): イベントのデフォルト動作をキャンセルします。
□stopPropagation(): イベントのさらなるキャプチャまたはバブリングをキャンセルします。
□target: イベントのターゲット。
□type: トリガーされるイベントのタイプ。
□ビュー: イベントに関連付けられた抽象ビュー。
③イベントハンドラ内:
□オブジェクト this は常に currentTarget の値と等しくなります。つまり、this と currentTarget の両方がイベントプログラムにバインドされた要素を指します。
□target には、イベントの実際のターゲット、つまりイベントをトリガーした要素のみが含まれます。
④event.preventDefault(): 特定のイベントのデフォルトの動作をキャンセルできます。
⑤event.stopPropagation(): DOM 内のイベントの伝播を即時に停止します。
⑥eventPhase 属性を使用して、イベントが現在イベントフローのどの段階にあるかを判断します。
3.2 IE のイベントオブジェクト
①IE でのイベントオブジェクトへのアクセスは、指定されたイベントハンドラメソッドに依存します。
□DOM0レベルのメソッドを使用してイベントハンドラを追加する場合、イベントオブジェクトはウィンドウオブジェクトの属性として存在します。
□attachEvent()を使用して追加すると、イベントオブジェクトがパラメータとして渡されます。 window.event を通じてアクセスすることもできます。
□HTML 属性を通じてイベントハンドラーを指定する場合、event という名前の変数を通じてイベントオブジェクトにアクセスできます。
②IE のすべてのイベントオブジェクトには次の属性/メソッドが含まれます。
□cancelBubble: デフォルトは false、イベントバブリングをキャンセルするには true に設定します (DOM の stopPropagation() メソッドと同様)
□returnValue: デフォルトtrue の場合、イベントのデフォルトの動作をキャンセルするには false に設定します。 (DOM2 のPreventDefault() メソッドと同様)
□srcElement: イベントのターゲット (DOM2 の target 属性と同じ)
□type: トリガーされるイベントのタイプ。
3.3 クロスブラウザイベントオブジェクト
vareventUtil = {
getEvent : function(event){
Return イベント Event :
},
getTarget : function (イベント){
return event.target ||
},
preventDefault : function(event){
if(event.preventDefault){
event.preventDefault() ;
}else{
event.returnValue = false;
}
},
stopPropagation : function(event){
if(event.stopPropagation){
event. ();
}else{
event.cancelBubble = true;
}
}
4. ユーザーがイベントを渡すときマウスページ上でアクションが実行されるとトリガーされます。
□キーボードイベント、ユーザーがキーボードを介してページ上でアクションを実行するとトリガーされます。
□HTML イベント、ブラウザーウィンドウが変更されたとき、または特定のクライアント/サーバーがトリガーされます。インタラクションがトリガーで発生します。
□Mutation イベント。基礎となる DOM 構造が変更されたときにトリガーされます。
4.1 UI イベント
UI イベントは主に要素のフォーカスに関連しており、DOM 互換ブラウザでのみサポートされます。
□DOMActive: 要素がユーザー操作 (マウスまたはキーボード経由) によってアクティブ化されたことを示します。
□DOMFocusIN: 要素がフォーカスを取得したことを示します。これは HTML のフォーカスイベントの通常のバージョンです。
□DOMFocusOut: 要素がフォーカスを失ったことを示します。 HTML内では
△対応ブラウザが非常に少ないため、お勧めしません。
4.2 マウスイベント
① DOM には 7 つのマウスイベントが定義されています。ページ上のすべての要素はマウスイベントをサポートしています。
□click: ユーザーがメインのマウスボタン (左側のボタン) をクリックしたとき。一般式)、または Enter キーを押すとトリガーされます。
□dblclick: ユーザーがマウスのメインボタン (通常は左ボタン) をダブルクリックするとトリガーされます。
□mousedown: ユーザーがマウスのボタンを押すとトリガーされます。このイベントはキーボードからトリガーすることはできません。
□mouseout: マウスポインタが要素の上にあり、ユーザーがそれを別の要素に移動したときに発生します。新しく移動された要素は、古い要素の外側にあるか、その子要素である可能性があります。キーボードからはトリガーできません。
□mouseover: マウスポインターが要素の外にあり、ユーザーが初めてマウスポインターを別の要素の境界内に移動したときにトリガーされます。キーボードからはトリガーされません。
□mouseup: ユーザーがマウスボタンを放したときにトリガーされます。キーボードからはトリガーされません。
□mousemove: マウスポインターが要素内を移動すると繰り返しトリガーされます。キーボードからはトリガーできません。
②注意:
□クリックイベントは、同じ要素上でマウスダウンイベントとマウスアップイベントが連続してトリガーされた場合にのみトリガーされます。マウスダウンまたはマウスアップのいずれかがキャンセルされた場合、クリックイベントはトリガーされません。
□ dblclick イベントがトリガーされる前に、同じ要素が連続して 2 回クリックイベントをトリガーします。
4.2.1 クライアント領域の座標位置
□マウスイベントはブラウザのビューポート内の特定の位置で発生します。この位置情報は、イベントオブジェクトの clientX プロパティと clientY プロパティに保存されます。
4.2.2 画面座標位置
□マウスイベントが発生すると、コンピューター画面全体に対する相対的な位置も存在します。イベントオブジェクト(event)のscreenXプロパティとscreenYプロパティに保存されます。
4.2.3 修飾キー
□マウスイベントは主にマウスを使用してトリガーされますが、キーボードの特定のキーもマウスを押したときに必要な操作に影響を与える可能性があります。
□修飾キーは、Shift、Ctrl、Alt、Meta (Apple では cmd キー、Windows では Windows キー) です。
□ DOM 内の次の 4 つのキーを表すブール属性: (マウスイベントの場合)shiftKey、ctrlKey、altKey、metaKey (IE は metaKey をサポートしません)。
4.2.4 関連要素
マウスオーバーイベントとマウスアウトイベントが発生すると、さらに多くの要素が関係します。どちらのイベントにも、マウスポインタを 1 つの要素の境界内から別の要素の境界内に移動することが含まれます。
□DOM は、evnet オブジェクトの AssociatedTarget 属性を通じて関連要素情報を提供します。
□IE は、relativeTarget 属性をサポートしていません。
◇mouserover イベントがトリガーされると、関連する要素が IE の fromElement 属性に保存されます。
◇mouseout イベントがトリガーされると、IE の toElement 属性は関連する要素を保存します。
□互換メソッド:
vareventUtil = {
getManyTarget : function(event){
if(event.popularTarget){
return event.popularTarget
}else if(event; .toElement){
returnevent.toElement;
}else if(event.fromElement){
returnevent.fromElement;
}
}
};
4.2.5 マウスボタン
□click イベント: マウスの主ボタンをクリックすることによってトリガーされ、キー情報を検出する必要はありません。
□Mousedown および Mouseup イベントは、イベントオブジェクトに、押されたボタンまたは離されたボタンを表す button 属性を持っています。
□DOM のボタン属性値:
◇0 は主マウスボタンを意味します
◇1中マウスボタン (ホイールボタン)
◇2副マウスボタン
□IE が提供するボタン属性
◇ 0 ボタンなし ◇1 主キーを押す ◇2 副キーを押す ◇3 主キーと副キーを同時に押す ◇4 中ボタン ◇5 主キー ◇6 副キー ◇7 主キーと副キー
□互換コード
getButton : function (event) ){
if(document.implementation.hasFeature("MouseEvents","2.0")){
returnevent.button;
}else{
switch(event.button){
ケース 0 :
ケース 1 :
ケース 3 :
ケース 5 :
ケース 7 :
リターン 0;
ケース 2 :
ケース 6 :
リターン;
ケース 4:
return 1;
}
}
}
□主キーが押されたり放されたりしない場合、Opera はマウスアップまたはMousedown
4.2.6 その他のイベント情報
□DOM2 の詳細属性: 要素のクリック数。要素を離れた後に 0 にクリアされます。
□IE はマウスに追加情報を追加します。 (IE でのみサポートされており、実用的な価値はありません)。
4.2.7 モバイル Safari
iPhone および Ipod の Safari 用に開発する場合:
□ dblclick イベントはサポートされていません。 Safari ウィンドウをダブルクリックすると拡大しますが、その動作を変更する方法はありません。
□最初にクリック可能な要素をタップして、mousemove イベントをトリガーします。コンテンツが変更された場合、他のイベントは発生しません。内容に変更がない場合は、マウスダウン、マウスアップ、クリックが一度に発生します。
□mousemove イベントは、mouseover イベントと Mouseout イベントもトリガーします。
4.2.7 アクセシビリティの問題
スクリーンリーダーは、クリックによってのみイベントをトリガーできます。マウスイベントを使用する際の注意事項:
□ クリックイベントを使用してコードを実行します
□ 新しいオプションをユーザーに表示するために onmouseover を使用しないでください。スクリーンリーダーがトリガーされません。
□重要な操作を実行するために dblclick を使用しないでください。キーボードをトリガーできません。
4.3 キーボードイベント
① キーボードイベントのサポートは主に DOM レベル 0 に従います。「DOM レベル 3」はキーボードイベントを指定します。
② 3 つのキーボードイベント:
□keydown: ユーザーがキーボードの任意のキーを押すとトリガーされ、ユーザーがそのキーを押し続けると、このイベントが繰り返しトリガーされます。
□keypress: ユーザーがキーボードの文字キーを押したときにトリガーされ、キーを押し続けると、このイベントが繰り返しトリガーされます。
□keyup: ユーザーがキーボードのキーを放したときにトリガーされます。
□マウスイベントと同じ、同じ修飾キーをサポートします。さらに、キーボードイベントオブジェクトには、shifKey、ctrlKey、altKey、metaKey 属性もあります。
4.3.1 キーコード
①keydown イベントと keyup イベントが発生すると、イベントオブジェクトの keyCode 属性にキーボードの特定のキーに対応するコードが含まれます。
②keyCode属性値は、対応するASCIIコードの小文字または数字のエンコーディングと同じです。表P304を確認
③ DOMイベントオブジェクトとIEイベントオブジェクトはどちらもkeyCode属性をサポートしています。
④以下は、キーダウンイベントまたはキーアップイベントに関係なく存在するいくつかの特殊な状況です。
□ Firefox と Opera では、セミコロンキーを押したときの keyCode 値は ASCII 値である 59 ですが、IE と Safari は戻ります。 186、キーボードのキーコード
□ Safari 3 の以前のバージョンでは、上下左右およびページの上下は 6300 より大きい値を返しました。
□ Opera 9.5 より前のバージョンでは、数字以外のアルファベットキーの keyCode は ASCII エンコーディングに設定されます。
□ Safari 3 より前のバージョンでは、タブ、シフト、コントロール、または置換キーを押してもキーダウンイベントとキーアップイベントはトリガーされません。
4.3.2 文字エンコーディング
□Firefox、Chrome、Safari のイベントオブジェクトは charCode 属性をサポートします。この属性はキー押下が発生した場合にのみ値を持ち、文字の ASCII エンコーディングです。このときのkeyCodeの値は0でもよいし、押されたキーコードでもよい。
□IE と Opera は ASCII エンコーディングを keyCode に保存します。
□クロスブラウザ文字エンコーディング
var EventUtil = {
//コード省略
getCharCode: function(event){
if(typeofevent.charCode == "number") {
return event.charCode;
}else{
returnevent.keyCode;
},
};
4.3.4 textInput イベント
ユーザーが編集可能領域に文字を入力すると、textInput イベントがトリガーされます。
◇編集領域のみが textInput イベントをトリガーできます。
◇イベントは、ユーザーが実際の文字を入力できるキーを押したときにのみトリガーされます。
◇イベントオブジェクトには、ユーザーが入力した文字を保存するデータ属性が含まれています。
□2008 年前半では、Safari3 と Chrome のみがサポートしています。
4.3.4 デバイスのキーボードイベント。 (略)
4.4 HTML イベント
①定義: HTML イベントとは、必ずしもユーザーの操作に関係しないイベントを指します。
□ロードイベント:
◇ページが完全にロードされたときにウィンドウ上でトリガーされます。
◇すべてのフレームが読み込まれたときにフレームセットでトリガー
◇画像が読み込まれたときに要素でトリガー
◇埋め込みコンテンツが読み込まれたときに