JavaScriptアドバンスプログラミングイベント学習ノート_JavaScriptスキル

第 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 イベントとは、必ずしもユーザーの操作に関係しないイベントを指します。
□ロードイベント:
◇ページが完全にロードされたときにウィンドウ上でトリガーされます。
◇すべてのフレームが読み込まれたときにフレームセットでトリガー
◇画像が読み込まれたときに 要素でトリガー
◇埋め込みコンテンツが読み込まれたときに