web-dev-qa-db-ja.com

JavaScript addEventListener関数

イベントハンドラーは初めてですが、以下のコードに遭遇しました

document.addEventListener("DOMContentLoaded", function() {
    initialiseMediaPlayer();
}, false);

同じコードを書くのに違いはありますか

document.addEventListener("DOMContentLoaded", initialiseMediaPlayer();, false);

最終的には同じ関数を呼び出しているので、違いはありますか、それとも上記の方法で記述することには利点がありますか？

javascriptfunctionaddeventlistener
13
Bazinga777
document.addEventListener("DOMContentLoaded", function() {
    initialiseMediaPlayer();
}, false);

DomコンテンツがロードされるとinitialiseMediaPlayerを実行します。

document.addEventListener("DOMContentLoaded", initialiseMediaPlayer();, false);

構文エラーです。セミコロンを削除した場合：

document.addEventListener("DOMContentLoaded", initialiseMediaPlayer(), false);

すぐにinitialiseMediaPlayerを呼び出し、次に戻り値（おそらくではない関数）をaddEventListenerに渡します。これは期待どおりに動作しません。

できるよ

    document.addEventListener("DOMContentLoaded", initialiseMediaPlayer, false);

（括弧を削除=関数呼び出し）。次に、ロードされたdomコンテンツに対してinitialiseMediaPlayerが実行され、必要に応じて動作します。

ただし、前者の場合とは異なり、initialiseMediaPlayerは実際にはブラウザによって指定された引数を受け取ります。また、その戻り値はブラウザによって受け取られます。 DOMContentLoadedの場合、ほとんどの場合これは問題になりません。

また、initialiseMediaPlayerを直接渡す場合は、1つの追加の匿名関数を作成する必要がなくなります。繰り返しますが、効果はユーザーの観点からは実際には認識できません。

47
John Dvorak

1）。はい、大きな違いがあります。 2番目のバージョンはエラーをスローします。しかし、次のように修正しても、

document.addEventListener("DOMContentLoaded", initialiseMediaPlayer(), false);

initialiseMediaPlayerはDOMContentLoadedで呼び出されません。なぜなら、()は、それをすぐに実行させますが、参照を関数に渡す必要があるためです、その結果ではありません。

2）。別の重要な違いは呼び出しのコンテキストです。

document.addEventListener("DOMContentLoaded", initialiseMediaPlayer, false);

initialiseMediaPlayerは、documentオブジェクトのコンテキストで呼び出されます。一方、最初のバージョンはWindowオブジェクトコンテキストで呼び出されます。

10
dfsq

addEventListener()関数の2番目の引数はtype functionを受け入れます。したがって、initialiseMediaPlayer();を渡すことはできません。これは関数の呼び出しであるためです。

あなたができることは：

var onDOMContentLoaded = function() {
    initialiseMediaPlayer();
};
document.addEventListener("DOMContentLoaded", onDOMContentLoaded, false);
8
Amy

最初のケースでは

_document.addEventListener("DOMContentLoaded", function() {
    initialiseMediaPlayer();
}, false);
_

匿名関数function(){initialiseMediaPlayer();}は、ドキュメントのイベント「DOMContentLoaded」がトリガーされたときにトリガーされるように登録されています

2番目の場合：

_document.addEventListener("DOMContentLoaded", initialiseMediaPlayer();, false);
_

イベントリスナーとして登録されるのは、式initialiseMediaPlayer()の結果です。

だから、はい、違いがあります:)

0
Francisco Meza