javascript - -Tagのonloadイベントにeventlistenerをアタッチできません

Question

なぜHTML画像のonloadイベントにeventlistenerをアタッチできないのか疑問に思っています。

<img id="imageID" onload="doSomething();">完璧に動作し、

しかし、私が次のようなリスナーを追加したい場合

document.getElementById('imageID').addEventListener('onload', function(e) {
     doSomething();
     });

またはjQueryを使用

$("imageID").on("onload", function(){
doSomething();
});

イベントはキャッチされていません。単純な「クリック」-イベントをリッスンすると機能しますが、「オンロード」-イベントでは機能しません。

誰かがこの行動の理由を教えてもらえますか？

score 5 · Accepted Answer

"on"イベント名には含めないでください。

                              // no "on"------------v
document.getElementById('imageID').addEventListener('load', function(e) {

   // no "on"----v
$("#imageID").on("load", function(){
// ^----need "#"

score 0 · Accepted Answer

ここには2 つの問題があります。

I Hate Lazy が言ったように、イベント名に「on」を入れないでください。
すでにページにある画像に load イベントをフックしようとすると、競合状態が発生し、イベントが表示されないことがあります。ページ (関連する画像がキャッシュにある場合)。画像が属性を持つ前にロードをフックする必要がありsrcます。これは通常、画像を動的に追加することを意味します。DOM0 ハンドラー ( onload="doSomething()") は、画像がドキュメントに追加されたときに既にアタッチされているため機能しますが、後でページ (getElementByIdまたは jQuery) で画像を検索すると、それを見逃す可能性があります。

2 に答える 2