3 
A) <div id="myDiv" onclick="MyFunc()"></div>

B) document.getElementById("myDiv").onclick = MyFunc;

C) document.getElementById("myDiv").addEventListener("click", MyFunc, false)

では、イベントを DOM 要素にアタッチするこれら 3 つの方法の違いは何ですか (C が IE で動作しないという事実は無視してください)。

4

1 に答える 1

3

方法AとB

これらは DOM レベル ゼロ イベントとして知られており、やや古い傾向があります。メソッド A は HTML でインラインで宣言しますが (悪い)、メソッド B は同じことを行いますが、JS で集中的に行います。

メソッド A では、属性値は有効な JS の文字列であり、起動時に評価されます (これも悪いことです)。イベントがバインドされる位置により、これは、この文字列で参照されるすべての関数がグローバル (またはグローバルにアクセス可能なメソッド) である必要があることを意味します。メソッド B では、イベントはインラインではなく、JS で一元的にバインドされます。

それらの主な注意点は、時代遅れで単純化されていることを除けば、要素ごとに 1 種類のイベントしかバインドできないことです。このメカニズムで 2 つのクリック イベント ハンドラーを同じイベント ハンドラーにバインドしようとすると、最初のイベント ハンドラーは忘れられます。単に要素の属性を上書きしているだけなので、これは理にかなっています。

方法 C

addEventListenerイベントを添付するための標準です。長い間、IE はこれをサポートしておらず、同等のattachEvent方法を好んでいました。それらのいくつかの違いは次のとおりです。

  • attachEventイベントのキャプチャを許可しません (param 3 はaddEventListenerこれを許可します)
  • withattachEventでは、イベント オブジェクト (つまり、発生したイベントに関する情報を格納するオブジェクト) は でアクセスされますがwindow.event、 withaddEventListenerではコールバックへの唯一の引数として転送されます。
  • のattachEvent場合、イベント名の前に を付ける必要がありますon(例: onClick. addEventListener単純に必要click
  • でaddEventListener、thisコールバック内のキーワードは、イベントをトリガーした要素を指します。イベント ( ) オブジェクト内のプロパティから要素を抽出して、これattachEventを自分で解読する必要があります。window.event

IE9 が登場し、サポートしていますaddEventListener。

于 2012-07-06T18:49:25.153 に答える