2013-03-06 21 views
12

私は、イベントハンドラに新しいですし、私はのJavascriptのaddEventListener機能

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

の下に書かれたコードに遭遇してきたが最終的に我々は

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

と同じコードを書くの違いはあります同じ機能を呼び出すので、違いがありますか、それとも上記の方法でそれを書いていく上で利点がありますか?

+3

後者は考えていません –

+4

後者は構文エラーです –

+1

initializeMediaPlayerの戻り値をイベントリスナーに渡しています。呼び出しを取り除くと返り値 – danronmoon

答えて

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

initialiseMediaPlayerを実行します。

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

は構文エラーです。あなたはセミコロンを削除する場合:

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

initialiseMediaPlayerはすぐに、そしてaddEventListenerに(おそらく関数ではない)の戻り値を渡す呼び出します。これは望みどおりに動作しません。


あなたは

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

を行うことができます(括弧=関数呼び出しを削除します)。その後、initialiseMediaPlayerはロードされたDOMコンテンツで実行され、必要に応じて動作します。

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

initialiseMediaPlayerを直接渡すと、1つの余分な匿名関数が作成されることもありません。ここでも、その効果は、ユーザの立場からは実際には知覚できない。

+1

initialiseMediaPlayerがパラメータを受け取るとどうなりますか? –

+0

@montogeekこのパラメータは[注目すべきプロパティがそれが指すドキュメントであるイベントオブジェクト](https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded)になります。私は、イニシャライザーがそれに渡されるイベントオブジェクトがあることに気付かないこともあります。 –

+1

ありがとう、私はそれを考え出しました.bindを使って私の問題を解決しました。 –

8

addEventListener()関数の第2引数は、タイプの関数を受け入れます。したがって、それは関数呼び出しであるため、initialiseMediaPlayer();を渡すことはできません。あなたは何ができるか

は次のとおりです。

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

まで同じ – Bazinga777

10

1)。はい、大きな違いがあります。 2番目のバージョンではエラーが発生します。しかし、あなたはこのようにそれを修正しても:あなたが機能、ないその結果にrefereceを渡す必要がありながら()が、それはすぐに実行させるため

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

initialiseMediaPlayerDOMContentLoadedで呼び出されることはありません。

2)。別の重要な相違点は、の呼び出しコンテキストです。

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

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

+0

はちょっと混乱しているように聞こえるが、物事をはっきりとはっきりと示してくれる。たくさんのことがあります。 – Bazinga777

+2

コンテキストは、 'this'が関数内のさまざまなオブジェクトを参照することを意味します。 – dfsq

0

最初のケース

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

に匿名関数function(){initialiseMediaPlayer();}は、ドキュメントのイベント 'DOMContentLoadedが' 第二の場合には

をトリガしますときに起動されるように登録されている:

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

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

ので、はい、違いがあります:)のDOMコンテンツがロードされたときに