JavaScript イベント学習 第 5 章 高度なイベント登録モデル_JavaScript スキル

W3C と Microsoft はどちらも、Netscape の従来のモデルを置き換える独自のイベント登録モデルの開発に注力しています。私は Microsoft のモデルはあまり好きではありませんが、マウスの位置の問題を除けば、w3c のモデルはまだ優れています。ただし、現在これをサポートしているブラウザは少数です。
W3C
W3C の DOM レベルのイベント仕様では、従来のモデルの問題点が考慮されています。これは、複数のイベントを 1 つの要素にバインドする場合に優れたソリューションを提供します。
W3C イベント登録モデルの鍵は addEventListener() です。イベント タイプ、実行する関数、ブール値 (true または false) の 3 つのパラメータを彼に与えます。これについては後ほど説明します。よく知られている doSomething() 関数を要素の onclick イベントに登録するには、次のようにすることができます:
element.addEventListener('click',doSomething,false)
このモデルの魅力は、次のことができることです。 add モニターは必要なだけ追加できます。従来のモードで前の例を使用する場合は、次のように記述できます。
element.addEventListener('click',startDragDrop,false)
element.addEventListener('click',spyOnUser,false)
ユーザーが要素をクリックすると、両方のイベント ハンドラーが実行されます。 W3C 標準では、どのイベントが最初に実行されるかを決定できないことに注意してください。したがって、startDragDrop() が spyOnUser() の直前に実行されるとは考えられません。
イベント ハンドラーの削除も非常に簡単で、removeEventListener() を使用するだけです。
element.removeEventListener('click',spyOnUser,false)
2 番目のイベント ハンドラーは削除されますが、最初のイベント ハンドラーは変更されません。従来のモードの問題を完全に解決した非常に美しいプログラムです。

匿名関数
W3C モードでも匿名関数を使用できます:

コードをコピー コードは次のとおりです。次のように:

element.addEventListener('click',function () {
this.style.backgroundColor = '#cc0000'
},false)

true または false
true または false は addEventListener の最後のパラメータであり、関数をキャプチャ フェーズまたはバブリング フェーズで実行することを意味します。よくわからない場合は、false (バブリングフェーズ) を使用してください。
this
JavaScript では、this キーワードは通常、関数の所有者を指します。これがイベントが発生した HTML 要素を指している場合は、すべて問題なく、多くのことを簡単に行うことができます。
残念ながら、これは非常に強力ではありますが、どのように機能するかを正確に知らないと使用するのがまだ困難です。これについては別の場所で詳しく説明します。
w3c モデルでは、その操作は従来のモードと同じです。現在イベントを処理している HTML 要素を表します。

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

element.addEventListener('click',doSomething ,false) ;
another_element.addEventListener('click',doSomething,false);
function doSomething() {
this.style.backgroundColor = '#cc0000';


HTML 要素のクリック練習に doSomething() を登録すると、ユーザーがクリックするとこの要素の背景が赤に変わります。

どのイベント ハンドラーが登録されていますか?
現在の W3C イベント登録モデルの問題の 1 つは、要素にどのイベント ハンドラーが登録されているかがわからないことです。従来のモードでは、次のことができます。
alert(element.onclick)
どの関数が登録されているかを確認できます。未定義は、このイベントに関数が登録されていないことを意味します。最近の DOM レベル 3 イベントでのみ、W3C は登録されたイベント ハンドラーを保存するためにeventListenerList を追加しました。非常に新しいため、サポートしているブラウザはほとんどありません。しかし、問題は解決されました。
幸いなことに、要素のイベントが登録されていないため、removeEventListener() はエラーを返しません。そのため、心配することなく、removeEventLister() を使用できます。
Microsoft
Microsoft にもイベント登録モデルがあります。これは W3C のものとよく似ていますが、重大な欠陥があります。
要素にアタッチするイベント ハンドラーを登録します:
element.attachEvent('onclick',doSomething)
代わりに、2 つのイベント ハンドラーが必要です:
element.attachEvent('onclick' ,startDragDrop)
element.attachEvent('onclick',spyOnUser)
削除も非常に簡単です:
element.detachEvent('onclick',spyOnUser)

欠陥
W3C との比較, Microsoft は 2 つの深刻な問題を抱えています:
、イベントは常に泡立ち、キャプチャされる可能性はありません。
。イベント ハンドラーはコピーではなく参照されるため、this キーワードは常に window を指し、まったく役に立ちません。
これら 2 つの問題の結果、イベントが発生した場合、どの要素がそのイベントを処理しているのかを知ることができなくなります。後ほどの流れの章で詳しく説明します。
また、Microsoft の標準は IE でのみサポートされており、ブラウザー間で使用することはできません。たとえ Windows ブラウザ用のスクリプトを作成しているだけであっても、問題が発生すると手に負えなくなる可能性があるため、スクリプトは使用しないことをお勧めします。
続き
学習を続けたい場合は、次の章をお読みください。
元のアドレス: http://www.quirksmode.org/js/events_advanced.html
最初の翻訳: @rehawk を含めてください。