jsの学習ノート：イベント処理モデル

さまざまなブラウザでは、以下の4種類のイベントモデルが存在します：基本的なイベントモデル、標準のイベントモデル、IEのイベントモデル、Netscapeのイベントモデルがあります。4イベントモデルについて具体的に説明します。

1、現在存在する4種類のイベントハンドラモデルは以下の通りです：基本的なイベントモデル、標準のイベントモデル、IEのイベントモデル、Netscapeのイベントモデルがあります。4イベントモデルですが、基本的には無視できます。

2、イベントハンドラモデルは基本的なイベントハンドラと高度なイベントハンドラの2種類に分類されます。基本的なイベントモデルは基本的なイベントハンドラに属しますが、標準のイベントモデルとIEのイベントモデルは高度なイベントハンドラに属します。

1、基本的なイベントハンドラ：

基本的なイベントハンドラは、基本的なイベントモデルを実装したイベントハンドラです。主に以下の2種類に分類されます：

（1）、HTMLタグの性質としてのイベントハンドラ、例：<div onmouseover=”var a=1; alert();”>……</div>　　　　　　　　　　 //ここでは、onmouseoverは単なる代表であり、他の多くのイベントも含まれています。

この方法では、onmouseoverなどイベントハンドラに割り当てられるのはJSコード文字列で、システムはこれらのコード文字列を自動的に匿名関数に包装します。この中にはthisキーワードがあり、それはこのタグ要素を指し、eventキーワードがあり、それはイベントが発生したときのイベントオブジェクトを表します（標準ブラウザで使用されます）。例：<div onmouseover=”f(this,event);”>……</div>

　実際には、onmouseoverなどを見なすことができます。値が割り当てられる前に、それは空関数です。jsコードが割り当てられると、それは空関数にコードが追加されたことに相当します。onmouseoverなどが実際には関数であるため、明示的に呼び出すことができます、例えばelement.onmouseover()ですが、これによりmouseoverイベントが実際に発生することはありません。

イベント関数（例えばonmoouseoverなど）にfalseを返すことで、デフォルトの動作の発生を防ぐことができます。

関数はその定義された範囲で実行されるため、イベントハンドラ関数にjsコードを割り当てることは、このHTMLタグ環境で関数を定義することに相当します。この環境は特別で、高次の作用域はwindowグローバルオブジェクト環境ではなく、その間には少なくとも1つの作用域環境が存在します。そして、<script>内で定義された関数は、その高次の作用域環境はwindowです（もちろん、ネストされた関数は別の問題です）。したがって、HTMLタグ内では、コードを<script>内で定義された関数に置き、その関数を呼び出してイベント関数に割り当てるのが最善です、例：<div onmouseover=“function();”>……</div>

(2)、JavaScript属性としてのイベントハンドラ

この方法では、イベントハンドラ関数にjsコード文字列を割り当てることはできません。代わりに、関数（関数呼び出しではない）を直接割り当てるか、匿名関数を割り当てます。例えば、element.onmouseover = function() {……} または element.onmouseover = f; fは関数であり、ここでは括弧を付けません

基本的なイベント処理も冒泡として上に伝播されます

　二、高度なイベント処理：

高度なイベント処理は、標準イベントモデルとIEイベントモデルで実現されるイベント処理を指します

【概念理解】イベントの伝播は、キャプチャー伝播と冒泡伝播の2種類に分けられます

キャプチャー伝播：つまり、イベントが外部から内部に伝播し、各レベルでイベントが発生します

冒泡伝播；つまり、イベントが内部から外部に伝播し、各レベルでイベントが発生しますが、すべてのイベントが冒泡するわけではありません

（1）標準イベントモデル

標準イベントモデルは、冒泡伝播とキャプチャー伝播の両方を発生させます

【イベント登録関数】

例えば：element.addEventListener(　　　 //fは関数です

f関数は以下のように定義できます：function f(e){……}　 //その引数はイベントが発生したときにEventオブジェクトを表します

高度なイベント処理の大きな利点は、同じ要素に複数のイベントハンドラを登録できることです。これらのイベントハンドラの実行順序は決まっていませんが、一般的には登録の順序に従って実行されます。重複のイベントハンドラが登録された場合、最初に登録されたものだけが有効になります。

removeEventListener() このメソッドはイベントの登録を解除するもので、addEventListener() と同じ3つの引数を持っています

　（2）IEイベントモデル

　IEイベントモデルは、イベントバブル伝播をサポートしています

【イベント登録関数】

2パラメータは、イベント名の1つで、注意してほしいのは、前縁があるon、2つ目はイベントハンドラ関数です。例えば、element.attachEvent(

　IEイベントモデルのEventオブジェクトは、イベント発生時にイベントハンドラ関数の引数として渡されるのではなく、IEのEventオブジェクトはwindowのグローバルオブジェクトで、イベント発生時にのみアクセスできます

したがって、f関数は以下のように定義できます：function f(){var e=window.event;……}　　 //その中でeはEventオブジェクトを取得します

detachEvent()は、イベント登録を解除するために使用される方法で、引数はattachEvent()と同じです

　addEventListener()とattachEvent()の重要な違いは、attachEvent()で登録されたイベントハンドラ関数のthisキーワードが常にwindowオブジェクトを指し、addEventListener()で登録されたイベントハンドラ関数のthisは発生したイベントの要素を指すことです

　（3）、IEと標準イベントモデルのEventオブジェクトの比較

IEイベントオブジェクト	IEイベントオブジェクト	標準イベントオブジェクト	標準イベントオブジェクト
altKey	trueはALTキーが押されていることを示し、falseは押されていないことを示します	altKey	trueはALTキーが押されていることを示し、falseは押されていないことを示します
ctrlKey	trueはCTRLキーが押されていることを示し、falseは押されていないことを示します	ctrlKey	trueはCTRLキーが押されていることを示し、falseは押されていないことを示します
shiftKey	trueはSHIFTキーが押されていることを示し、falseは押されていないことを示します	shiftKey	trueはSHIFTキーが押されていることを示し、falseは押されていないことを示します
button	マウスイベント。0はマウスボタンが押されていないことを示します1左ボタンを押下として2右ボタンを押下として4中央ボタンとして3左右ボタンを同時に押下として5左ボタンと中ボタンを押下として6右ボタンと中ボタンを押下として7左ボタン、中ボタン、右ボタンを押下として	button	0は左ボタンとして、1中ボタンとして、2右ボタンとして
clientX	イベント発生時、マウスがブラウザウィンドウ（ツールバー、スクロールバーなどを含まない）のX座標	clientX	イベント発生時、マウスがブラウザウィンドウ（ツールバー、スクロールバーなどを含まない）のX座標
clientY	同上	clientY	同上
screenX	イベント発生時、マウスがスクリーン全体上でのX座標	screenX	イベント発生時、マウスがスクリーン全体上でのX座標
screenY	同上	screenY	同上
type	イベントの名前（例：click）	type	イベントの名前（例：click）
srcElement	イベントを引き起こす要素	target	イベントを引き起こす要素
keyCode	keypressイベントは、ボタンのUnicode文字を表し、keydownおよびkeyupイベントではボタンの数字コードを表します	charCode	キーのUnicode文字を表します。
		keyCode	キーの数字コードを表します。
cancelBubble	trueの場合、イベントが上方向にバブルアップを停止します。	stopPropagation	このメソッドを呼び出すことで、イベントが上方向にバブルアップを停止できます。
		cancelBubble	trueの場合、イベントのバブルがキャンセルされています。falseの場合、キャンセルされていません。
returnValue	falseの場合、イベントのデフォルト動作を停止します。	preventDefault()	このメソッドを呼び出すことで、イベントのデフォルト動作を停止できます。
offsetX	イベントが発生した時の、イベントを発生させた要素に対するマウスのX座標を取得し、その要素の左上隅を原点としています（paddingやmarginは計算されません）。	layerX	イベントを発生させた要素に動的配置が設定されていない場合、マウスのX座標を取得し、その要素の最も近い、動的配置が設定された親要素の枠の左上隅を原点としています。 　　　　　　　 イベントを発生させた要素に動的配置が設定されている場合、マウスのX座標を取得し、その要素の枠の左上隅を原点としています。
x	マウスのX座標を取得し、イベントを発生させた要素の最も近い、動的配置が設定された親要素の枠の左上隅を原点としています。

これで本文のすべての内容が終わります。皆様の学習に役立つことを願っています。また、呐喊教程を多くの皆様にサポートしていただけると嬉しいです。

声明：本文の内容はインターネットから提供されています。著作権は原著者に帰属します。インターネットユーザーにより自発的に貢献し、自己でアップロードされています。本サイトは所有権を持ちません。人工的な編集は行われていません。また、関連する法的責任を負いません。著作権侵害を疑う内容がある場合は、メールを送信して：notice#wまでお知らせください。3codebox.com（メール送信時は、#を@に変更してください。通報をいただき、関連証拠を提供してください。一旦確認がついたら、本サイトは侵害疑いのコンテンツをすぐに削除します。）