web-dev-qa-db-ja.com

JavaScriptの$（window）.on（ 'resize'）

JavaScriptには、次のコードがあります。

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

と同じ：

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

上記の2つのコードブロックは機能的に同じですか？どちらか一方を使用する利点または欠点（ただしマイナー）はありますか？

どうですか：

window.addEventListener('resize', function(event) {
    // Do something.
});
javascriptjquerywindowsresize
18
GTS Joe

これらは同じではありません。最初の例では、domオブジェクトonresizeハンドラーへのイベントに影響を与えています。

JQueryバージョンはおそらく舞台裏で何か違うことをしているでしょう。ソースコードを調べることなく、おそらく次のことを行うだけです。

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

ただし、jQueryはイベントハンドラに魔法を追加しているため、jQueryのバージョンとネイティブのaddEventListenerはまだ異なります。

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

これについてもう少し詳しく説明します。 https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

そこにいる間に、addEventListenerの友達について読むこともできます：removeEventListener。

26
Loïc Faure-Lacroix

いいえ、同じではありません。あなたが試すことができます：

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

function1とfunction2は両方とも、ウィンドウのサイズ変更時に応答します。

しかし、あなたが使用している場合

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

Function2のみが応答します。

15
jilykate