js を使用してイベント処理モデルを実装する

この記事は主にjsを使ってイベント処理モデルを実装する方法を紹介していますので、興味のある方は参考にしてください。

さまざまなブラウザには 4 つのイベント モデルがあります: オリジナル イベント モデル、標準イベント モデル、IE イベント モデル、および Netscape4 イベント モデルです。これらについては以下で詳しく紹介します。

1. 現在、オリジナルイベントモデル、標準イベントモデル、IEイベントモデル、Netscape4イベントモデルの4つのイベント処理モデルがありますが、基本的には無視して大丈夫です

2. イベント処理モデルは、基本的なものに分けられます。 2 種類のイベント処理と高度なイベント処理。オリジナルのイベント モデルは基本イベント処理に属し、標準イベント モデルと IE イベント モデルは高度なイベント処理に属します。 1. 基本イベント処理:

主にオリジナルのイベントモデルのイベント処理の実装を指します。主に以下の 2 種類に分かれます:

(1)、

……

などの HTML タグとしてのイベント処理, onmouseover は代表的なものであり、他にも多くのイベントが含まれます。この方法では、JS コード文字列が onmouseover およびその他のイベント処理関数に割り当てられ、システムがこれらのコード文字列を匿名関数で自動的にラップします。タグ要素を指す this キーワードと、イベントが発生したときのイベント オブジェクトを表すevent キーワード (標準ブラウザで使用されます) を使用できます。例:

...

実際、値を割り当てる前は onmouseover を関数とみなすことができます。関数。 。 js コードを割り当てた後は、空の関数にコードを追加するのと同じです。 onmouseover などは実際には関数であるため、element.onmouseover() のように明示的に呼び出すことができますが、これによって実際にマウスオーバー イベントが発生するわけではありません。

イベント関数 (つまり、onmoouseover など) に false を返して、デフォルトのアクションを発生させることができます。

関数は定義されたスコープ内で実行されるため、イベント処理関数にjsコードを割り当てると、このHTMLタグ環境で関数を定義することと同等になります。この環境は非常に特殊であり、その上位レベルです。ロール ドメインはウィンドウ グローバル オブジェクト環境ではありません。2 つの間には少なくとも 1 つのスコープ環境があります。 <script> で定義された関数については、その上位スコープ環境は window です (もちろん、ネストされた関数は別の問題です)。したがって、HTML タグでは、<script> で定義された関数にコードを配置し、この関数呼び出しをイベント関数、つまり <p onmouseover="function();"> に割り当てることが最善です。 ...</p><p>(2)、JavaScript 属性としてのイベント処理 たとえば、element.onmouseover=function(){...}<p>この方法では、js を割り当てることができなくなることに注意してください。コード文字列をイベント処理関数に割り当てますが、(関数呼び出しではなく) 関数を直接割り当てるか、element.onmouseover=function(){…} や element.onmouseover=f などの匿名関数を割り当てます。上の括弧 <p> 基本的なイベント処理もバブリングの形で上方に伝播します <p><p> 2. 高度なイベント処理: <p> 高度なイベント処理は、標準イベント モデルによって実装されるイベント処理のみを指し、 IEイベントモデル。 <p><strong>【概念的な理解】 イベントの伝播は、キャプチャ伝播とバブリング伝播の 2 つのタイプに分類できます。 キャプチャの伝播: つまり、イベントが外部から内部に送信され、イベントが各レベルで発生します。 <p> バブルの伝播、つまり、イベントが内部から外部に送信され、各レベルでイベントが発生します。全てのイベントが発生するわけではありません<p><p> (1) 標準イベントモデル<p> 標準イベントモデルは、バブリング伝播とキャプチャ伝播の両方が発生する可能性があります。 <p><strong>【イベント登録関数】<p>addEventListener() このメソッドは、特定の要素のイベント ハンドラーを登録します。最初のパラメーターはイベント名です。処理関数 (もちろん、匿名関数にすることもできます) イベントが発生すると、システムは自動的に Event オブジェクトを関数の最初のパラメーターに渡します。最後のパラメータはブール値で、true の場合はイベントのキャプチャと伝播ステージでのみ使用され、false の場合はイベントのバブリング伝播ステージでのみ使用されます<p><strong>。例: element.addEventListener("click ",f,false) // f は関数ですf 関数は次のように定義できます: function f(e){...} // その中のパラメータはイベント発生時のイベントオブジェクト<p>高度なイベント処理の一部 大きな利点は、同じ要素に対して複数のイベント処理関数を登録できることです。これらのイベント関数が実行される順序は決定できませんが、一般的には で実行されます。登録の順序。 重複したイベント関数が登録された場合、最初のイベント関数のみが実行されます。 <p>removeEventListener() このメソッドは、イベント登録をキャンセルするために使用されます。その 3 つのパラメーターは addEventListener() と同じです <p><p> (2) IE イベント モデル <p> IE イベント モデルは、イベントのバブリング伝播のみをサポートします <p><p><strong>【イベント登録関数】<p>attactthEvent() このメソッドにはパラメータが 2 つだけあり、1 つはイベント名 (プレフィックスに注意してください)、2 つ目はイベント処理関数です。たとえば、element.attachEvent("onclick",f)<p> IE イベントモデルの Event オブジェクトは、イベント発生時にイベント処理関数にパラメータとして渡されません。 IE の Event オブジェクトは、イベントが発生したときにのみ使用されます。 <p>したがって、f 関数は次のように定義できます: function f(){var e=window.event;...} //e は Event オブジェクトを取得します<p>detachEvent() このメソッドはイベント登録をキャンセルするために使用されます。そしてパラメータはattachthEvent()と同じです 同じ<p> addEventListener()とattachthEvent()の重要な違いは、attachthEvent()によって登録されたイベント処理関数のthisキーワードは常にウィンドウオブジェクトを指すのに対し、thisキーワードは常にウィンドウオブジェクトを指していることです。 addEventListener()で登録されるイベント処理関数が指す要素(3)、IE、イベントのEventオブジェクト<p><strong>標準イベントオブジェクト<table width="660" border="1"><tbody><tr class="firstRow"><td valign="top" width="136"><p style="text-align:center;"><strong>の要素です。 altKey<td valign="top" width="294"><p style="text-align:center;">tru​​eはALTキーが押されたことを意味し、falseはそうでないことを意味します<strong>altKey<td valign="top" width="129"><p style="text-align:center;"><strong> trueはALTキーが押されたことを意味します。 false は <td valign="top" width="299"><p style="text-align:center;"><strong>ctrlKey<tr> がないことを意味します true は <td valign="top" width="136"><p style="text-align:center;">ctrlKey<td valign="top" width="294"><p style="text-align:left;"> がないことを意味します true は <td valign="top" width="129"><p style="text-align:center;"> <td valign="top" width="299"> がないことを意味します<p style="text-align:left;">shiftKey<tr>tru​​e は SHIFT を意味しますfalse は <td valign="top" width="136"><p style="text-align:center;">shiftKey<td valign="top" width="294"><p style="text-align:left;"> キーが押されていないことを意味し、true は SHIFT キーが押されていることを意味し、false は <td valign="top" width="129"><p style="text-align:center;"><td valign="top" width="299"><p style="text-align:left;">button マウスイベントがないことを意味します。 0 はマウス ボタンが押されていないことを意味し、1 は左ボタンが押されたことを意味し、2 は右ボタンが押されたことを意味し、4 は中央ボタンが押されたことを意味し、3 は左ボタンと右ボタンが同時に押されたことを意味し、5 は左ボタンが押されたことを意味し、中央のボタンが押され、6 は右と中央のボタンが押されたことを意味し、7 は左ボタン、中央ボタン、右ボタンが押されたことを意味します<tr><td valign="top" width="136"><p style="text-align:center;">ボタン<td valign="top" width="294">0 は左ボタン、1 は中央ボタン、2 は右ボタンを意味します。 <p style="text-align:left;"><td valign="top" width="129"><p style="text-align:center;">clientX<td valign="top" width="299"> イベント発生時、マウスがブラウズしているブラウザウィンドウのX座標(ツールバー、スクロールバー等を除く) <p style="text-align:left;">clientX<tr><td valign="top" width="136"> イベント発生時、X座標ブラウザウィンドウ内のマウスの操作 (ツールバー、スクロールバーなどを除く) <p style="text-align:center;"><td valign="top" width="294">clientY <td valign="top" width="129"><p style="text-align:center;">同上<td valign="top" width="299"><tr>clientY<td valign="top" width="136"><p style="text-align:center;">同上<td valign="top" width="294"><td valign="top" width="129"><p style="text-align:center;"> 画面<td valign="top" width="299"> screenX<tr><td valign="top" width="136">イベントが発生すると、マウス<p style="text-align:center;">イベントの名前(クリックなど)<td valign="top" width="294"> <p style="text-align:left;">type<td valign="top" width="129"><p style="text-align:center;">イベントの名前(クリックなど)<td valign="top" width="299"><p style="text-align:left;"><tr> src要素<td valign="top" width="136"><td valign="top" width="294"><p style="text-align:left;">イベントを引き起こす要素<td valign="top" width="129"><p style="text-align:center;">target<td valign="top" width="299"><p style="text-align:left;">イベントを引き起こす要素<tr><td valign="top" width="136"><p style="text-align:center;">keyCode<td valign="top" width="294">keypressイベントの場合はボタンのUnicode文字を表し、 keydown イベントと keyup イベントでは、ボタンの番号を表します。 コード <td valign="top" width="129"><p style="text-align:center;">charCode<td valign="top" width="299"><p style="text-align:left;"> は、キーの Unicode 文字を表します。 <tr><td valign="top" width="136">keyCode<td valign="top" width="294"><td valign="top" width="129">のキー <p style="text-align:center;"><td valign="top" width="299"> <p style="text-align:left;">cancelBubble<tr><td valign="top" width="136">値が true の場合、イベントがバブルアップし続けるのを防ぎます<p style="text-align:center;"><td valign="top" width="294">stopPropagation<p style="text-align:left;"><td valign="top" width="129">このメソッドを呼び出して、イベントがバブルアップし続けるのを防ぐことができます<p style="text-align:center;"> <td valign="top" width="299"><p style="text-align:left;"><tr><td valign="top" width="136">cancelBubble<td valign="top" width="294"><td valign="top" width="129">tru​​eはイベントがバブルアップしたことを意味し、falseはバブルが存在しないことを意味します<p style="text-align:center;"><td valign="top" width="299"><p style="text-align:left;">returnValue<tr><td valign="top" width="136">値がfalseの場合、イベントのデフォルト動作が防止されます<p style="text-align:center;"><td valign="top" width="294">preventDefault()<p style="text-align:left;"><td valign="top" width="129">イベントのデフォルト動作を防止するにはこのメソッドを呼び出します<p style="text-align:center;"><td valign="top" width="299"> <p style="text-align:left;"> offset 要素が動的に配置されていない場合、マウスの X 座標動的に配置される最も近い親要素を基準とした相対値は、親要素の境界線の左上隅を原点として、イベントをトリガーした要素に返されます。 イベントをトリガーした要素が動的配置に設定されている場合、要素の境界の左上隅を原点として、イベントをトリガーした要素を基準としたマウスの X 座標が返されます。 <tr> <td valign="top" width="136"><p style="text-align:center;"> <td valign="top" width="294"> 以上は皆さんのためにまとめたもので、今後皆さんのお役に立てれば幸いです。 <td valign="top" width="129">関連記事: <p style="text-align:center;">JSONの使い方<td valign="top" width="299"><br/><tr><td valign="top" width="136">js<p style="text-align:center;"> html()メソッドとtext()メソッドでpタグの表示値を取得、設定する<td valign="top" width="294"><td valign="top" width="129">の使い方まとめJS の 3 つの読み込み方法 <td valign="top" width="299"> </script>

以上がjs を使用してイベント処理モデルを実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。