0

AS3 開発者として、私はこれに慣れています。

addEventListener(Event.RESIZE, onResize);

私は Typescript/JS/HTML5 を学ぼうとしていますが、これらのさまざまなやり方を見続けています。

私はこのスタイルが大好きです:

window.addEventListener("resize", this.onResize);

私はこのスタイルが嫌いです：

window.onresize = function();

これら2つのアプローチが存在する理由を誰かが説明できますか? それらは交換可能ですか？dom API リファレンスに window.onfoo がある場合、window.addEventListener("onfoo", this.onFoo); を使用できますか?

最後に、DOM のどこかに静的イベント リストはありますか? Event.onresize と言っていいですか、それとも文字列を入力する必要がありますか?

4

1 に答える 1

2

私はあなたが意味すると思います：

window.addEventListener("resize", this.onResize);

onresize最新のブラウザーにはイベントのようなものはありませんがonresize、DOM にはプロパティがあります。

これら2つのアプローチが存在する理由を誰かが説明できますか?

'インライン ハンドラ。歴史的/下位互換性の理由から存在し、HTML マークアップに追加できる属性を反映しています。clickイベント、onclickDOM プロパティ、属性があるのと同じようにonclick、このパターンは他の多くのイベントでも繰り返されます。

これらのインライン イベント ハンドラは、JavaScript が最初に登場したときに Netscape 2.0 で実装されたものです。モデルが単純で理解しやすく、コピーと貼り付けが簡単であり、既存の Web コンテンツを壊して Web ブラウザーを普及させた人は誰もいないため、それ以来、彼らはぶらぶらしていますが、プロの Web 開発者であれば、それらを使用することはありません。

インライン イベント登録には多くの制限があります。最も明白なのは、要素ごとに 1 つのプロパティ/属性しか持てないことです。Netscape と Microsoft は、より高度な (ただし互換性のない) モデルを開発し、W3C は、最新のすべてのブラウザーが実装するDOM レベル 2 仕様で標準化を試みました。

ただし、IE はバージョン 9 まで Microsoft の独自モデルを使用し続けました。これがおそらく最初の例を混乱させた原因です。

window.attachEvent('onresize',this.onResize);

主要なブラウザ間のイベント処理におけるこの根本的な非互換性は、(XHR とともに) jQueryなどの多くの JavaScript フレームワークの作成を促進した主な要因の 1 つです。

それらは交換可能ですか？

インライン イベント ハンドラーの両方を追加し、1 つをaddEventListenerthen にアタッチすると、意図的にイベントをキャンセルしない限り、両方のハンドラーが実行されます(つまり、それらは同じものではありません)。ただし、将来の狂気を防ぐために、より現代的なアプローチに固執することをお勧めします.

最後に、DOM のどこかに静的イベント リストはありますか?

イベント自体は、メカニズムの定義と並行して定義されるのではなく、関連する仕様で定義される傾向があるためです。特定のイベントに対するブラウザーのサポートが気になる場合は、 Modernizrのような関数を定義するisEventSupported()か、Modernizr を使用することをお勧めします。

于 2013-05-01T22:31:52.663 に答える