JavaScript イベント学習 第 4 章 従来のイベント登録モデル_JavaScript スキル

最も古い JavaScript ブラウザでのイベントの登録は、インライン モードでのみ可能です。 DHTML はページの操作方法を根本的に変えるため、イベント登録は拡張可能で適応性が高い必要があります。したがって、対応するイベント モデルが存在する必要があります。 Netscape は第 3 世代のブラウザから始まり、IE は第 4 世代のブラウザから始まりました。
Netscape 3 はこの新しいイベント登録モデルのサポートを開始したため、ブラウザ戦争以前は事実上の標準でした。したがって、Microsoft は、Netscape イベント処理モデルを使用するインターネット上の無数のページについて、互換性に関して最後に譲歩する必要がありました。
これら 2 つのブラウザ、実際にはすべてのブラウザが次のコードをサポートしています:

コードをコピー コードは次のとおりです:

element.onclick = doSomething;

これはイベントを登録する最良の方法です。ユーザーがこの HTML 要素をクリックするたびに、doSomething() が実行されます。これは、ブラウザー間でイベントを登録する唯一の最善の方法であり、このモデルとその制限について深く理解することが重要です。
正式な標準がないため、私はこれを仮に伝統的なイベント登録モデルと呼んでいます。同時に、w3c もイベント登録を標準化し、Microsoft もアドバンスト モードを開始しましたが、従来のモードでも引き続き問題なく実行できます。


Advanced Event Register
Netscape 3/IE 4 以降、JavaScript は要素上の一連のイベントの属性を認識できるようになりました。ほとんどの HTML 要素には、onclick、onmouseover、onkeypress などの属性があります。これらの要素がどのような属性を持つか、どの要素がどのイベントをサポートするかはすべてブラウザによって異なります。
これらのプロパティ自体も新しいものではありません。最も古い JavaScript ブラウザにはすでに存在しています。

コードをコピー コードは次のとおりです:

ここの A タグには onclick パラメータがあり、JavaScript では A 要素の属性になります。古いブラウザのイベント ハンドラーは、ページのソース コード内の要素にパラメーターを設定することによってのみ登録できました。このスクリプトをすべての A タグで実行したい場合は、すべてのリンクに onclick イベントを追加する必要があります。
従来のイベント登録モデルの登場により、これらの onclick、onmouseover、またはその他の HTML 要素のイベント処理を JavaScript を通じて登録できるようになりました。 HTML に一切触れずに、イベント ハンドラーを追加、変更、削除できるようになりました。 DOM 経由で HTML 要素にアクセスする場合、次のようなコードを記述できます:

コードをコピー コードは次のとおりです:

element.onclick = doSomething;

ここで、サンプル関数 doSomething() が element 要素の onclick 属性に登録され、ユーザーがこの要素をクリックすると関数が実行されます。イベント名は小文字にする必要があることに注意してください。
このイベント ハンドラーを削除するには、クリック イベントを空のままにします:

コードをコピーします コードは次のとおりです:

element.onclick = null;

イベント ハンドラーは通常の JavaScript 関数と同じです。イベントが発生していないときでも、彼はそれを実行できます。次のように書くと:

コードをコピー コードは次のとおりです:

element.onclick ()

すると doSomething も実行されます。ただし、何をすべきかわからない関数やエラーが発生する関数の場合は、実際のイベントは発生しません。したがって、これはイベント ハンドラーを実行する方法としてはほとんど使用されません。
Microsoft の IE5.5 以降のバージョンにも、同じことを実現する fireEvent() メソッドがあります。次のように使用します:

コードをコピー コードは次のとおりです:

element.fireEvent(' onclick')

括弧なし
イベント ハンドラーを登録するときに括弧は使用できないことに注意してください。 onclickメソッドは別の関数に設定されます。このように書くと

コードをコピーします コードは次のとおりです。

element.onclick = doSomething();

すると、この関数が実行され、その結果が onclick に登録されます。これは私たちが期待しているものではなく、イベントが発生したときに関数を実行したいだけです。さらに、この関数はイベントの発生時に実行されるように記述されています。実行が関連付けられていないと、重大な混乱やエラーが発生します。
そこで、イベント ハンドラー内の doSomething() メソッド全体をコピーします。イベントの実行時にこの関数を実行したいだけです。


this
JavaScript では、this キーワードは通常、関数の所有者を指します。これがイベントが発生した HTML 要素を指している場合は、すべて問題なく、多くのことを簡単に行うことができます。
残念ながら、これは非常に強力ではありますが、どのように機能するかを正確に知らないと使用するのがまだ困難です。これについては他の場所で詳しく説明しましたが、ここでは従来のモードでの概要を説明します。
従来のモードでは、これは次のように動作します。これはインライン モードとは若干異なることに注意してください。 this キーワードは HTML パラメータではなく関数内にあります。この違いについては後で別途説明します。

コードをコピーします コードは次のとおりです。

element.onclick = doSomething; another_element.onclick = doSomething;
function doSomething() {
this.style.backgroundColor = '#cc0000';
}

doSomething() を任意の HTML として登録した場合要素のクリック イベントが発生すると、ユーザーがその要素をクリックすると、要素に背景が表示されます。


匿名関数
マウスが上を通過するとすべての div の背景色を変更し、マウスが離れると背景色に戻るようにしたいとします。これを正しく使用するには、次のように記述できます:

コードをコピーします コードは次のとおりです:

var x = document.getElementsByTagName('DIV');
for (var i=0;ix[i].onmouseover = over;

実行します、問題ありません。ただし、over() と out() は比較的単純であるため、より洗練された匿名関数メソッドを使用して次のように記述することができます。 > コードは次のとおりです:

for (var i=0;ix[i].onmouseover = function () { this .style.backgroundColor='#cc0000'} x[i].onmouseout = function () { this.style.backgroundColor='#ffffff'} }

とにかく、onmouseoverとonmouseoutの両方が関数を取得します。 over() と out() をコピーするよりも、イベントが登録されるスクリプト上で直接イベント ハンドラーを定義する方が良いでしょう。これらの関数には名前がないため、匿名関数となります。
イベント ハンドラーを登録するこれら 2 つの方法は基本的に同じですが、唯一の違いは、2 番目の方法のコードが少ないことです。私は匿名関数がとても好きで、単純なイベント ハンドラーを登録するときに匿名関数を使用します。


問題
小さな問題は、従来のモードでは onclick 属性に 1 つの関数しか含めることができないことです。問題は、1 つのイベントに対して複数のイベント ハンドラーを登録する場合に発生します。
たとえば、ドラッグ可能なモジュールを作成したとします。このモジュールは onclick イベント ハンドラーに登録されているため、クリックするとドラッグを開始できます。また、ユーザーのクリックを追跡し、onunload 中にサーバーに情報を送信して、ページがどのように使用されているかを知ることができるモジュールも作成しました。このモジュールは、要素に onclick イベントを登録する必要もあります。
このようになります:

コードをコピーします


コードは次のとおりです:

要素.onclick = startDragDrop;
ここでエラーが発生します。 2 番目の登録プロシージャは最初の登録プロシージャを上書きするため、ユーザーが要素をクリックしたときに spyOnUser() のみが実行されます。
解決策は、2 つのメソッドを含むメソッドを登録することです:

コードをコピーします コードは次のとおりです:

element.onclick = function () {
startDragDrop()
spyOnUser()
}

柔軟な登録
しかし、Web サイトのすべてのページで 2 つのモジュールを使用しないと仮定しましょう。まだこのように書く場合:

コードをコピー コードは次のとおりです:

要素。 onclick = function () {
startDragDrop();
spyOnUser()
}

関数の 1 つが未定義であるため、エラー メッセージが表示されます。したがって、イベントを登録するときは特に注意してください。 startDragDrop() がすでに登録されている可能性があるときに spyOnUser() を登録したい場合は、次のように記述できます:

コードをコピー コードは次のとおりです:

var old = (element.onclick) ? element.onclick : function () {};
element.onclick = function () {
old ();
spyOnUser()
};

まず、変数 old を定義します。要素に既に onclick イベント ハンドラーがある場合は、old に格納します。ない場合は、old を空の関数に設定します。ここで、div の新しいイベント ハンドラーを登録する必要があります。次に、プログラムは最初に old() を実行し、次に spyOnUser() を実行します。これで、新しいイベント ハンドラーが要素に追加され、以前に登録されたイベント ハンドラー (存在する場合) も含まれます。
最後の質問: イベント ハンドラーの 1 つを削除したい場合はどうすればよいですか?今はわかりません。何らかの方法で element.onclick() を編集する必要がありますが、これについてはまだ調べていません。
その他のモード
従来のモードは非常にシンプルで使いやすいことがわかりましたが、イベントに複数のプログラムを追加する場合の解決策はまだ見にくいです。 W3C のイベント ハンドラーは、この問題をうまく解決します。
続き
学習を続けたい場合は、次の章をお読みください。