2016-01-27 14 views
11

に、次のコードがある( 'リサイズ'):

window.onresize = function() { 
    // Do something. 
} 

同じように:

$(window).on('resize', function() { 
    // Do something. 
}); 

が等しく、上記2つのコードブロックです、機能面では?いずれかの方法を使用してメリットとデメリットがありますか?どう

window.addEventListener('resize', function(event) { 
    // Do something. 
}); 
+0

window.onresizeはDOM $(window).onはjQueryです。両方とも異なりますが、効果は同じです – progrAmmar

答えて

17

彼らは同じではありませんが、最初の例では、あなたはDOMオブジェクトonresizeハンドラにイベントに影響を与えています。

jQueryのバージョンはおそらく、シーンの背後で何か違うことをしています。ソースコードに見もせず、それはおそらく、単純にやっている:jQueryのは、イベントハンドラにいくつかの魔法を追加しているため

言っ
window.addEventListener('resize', function() {...}) 

、jQueryのバージョンとネイティブaddEventListenerはまだ異なっています。

addEventListenenerは、複数のイベントを追加できますが、DOM属性on[event]では1つのイベントに限定されているため、おそらくDOMオブジェクトにイベントを追加する方法として推奨されます。ここで

はそれについてもう少しです:https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

あなたはそれでいる間、あなたもaddEventListener友人について読むことができます:removeEventListener

+1

プラスjQueryの利点は、クロスブラウザの互換性の保証です。大したことではなく、最新のブラウザについてのみ気にしますが、古いブラウザでは本当に便利です。 – Anton

+0

@Antonそれは可能かもしれませんが、私は何年もjQueryを使って何も書いていませんでした。適切に編成されたフレームワークで作業することは、jQueryグルーミングドームの修正に比べて9000倍になります。また、 'addEventListener'の記述時間が長くても、適切に行われたフレームワークによってどんな種類のイベントリスナも明示的に作成できなくなります。内部を知ることは、さらに進んでいくのは良いことです。 –

+0

あなたの答えにLoïcとAntonを感謝します。とても有難い。 –

10

いいえ同じものではありません。あなたは試みることができる:

$(window).on('resize',function1); 
    $(window).on('resize',function2); 

と関数1と機能2の両方の応答ウィンドウのサイズを変更します。

しかし、あなたは

window.onresize = function1; 
window.onresize = function2; 

のみ機能2応答を使用している場合。