2016-01-27 42 views
11

w JavaScript, jest następujący kod:

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

samo jak:

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

są dwa bloki kodu powyżej równe, funkcjonalnie? Czy jest jakaś zaleta lub wada (jakkolwiek niewielka) przy użyciu jednego lub drugiego?

Co o:

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

window.onresize to DOM $ (okno) .on to jQuery. Oba są różne, ale efekt jest taki sam. – progrAmmar

Odpowiedz

17

one nie są takie same, jak w pierwszym przykładzie, masz wpływu na imprezę do obiektu dom onresize obsługi.

Wersja jQuery prawdopodobnie robi coś innego poza sceną. Nie patrząc do kodu źródłowego, to chyba po prostu robi:

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

Powiedział, że wersja jQuery i rodzimy addEventListener nadal są różne, ponieważ jQuery jest także dodanie trochę magii do obsługi zdarzeń.

Jest to prawdopodobnie preferowany sposób dodawania zdarzeń do obiektu DOM, ponieważ można dodawać wiele zdarzeń, ale z atrybutem domowym on[event] ogranicza się do jednego zdarzenia.

Oto nieco więcej na ten temat: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

Podczas gdy jesteś na to, można również przeczytać o przyjaciela addEventListener: removeEventListener.

+1

Plus Zaletą jQuery jest gwarancja zgodności z różnymi przeglądarkami. Nic wielkiego, jeśli zależy ci tylko na najnowszych przeglądarkach, ale naprawdę przydaje się to w przypadku starszych. – Anton

+0

@Anton, który może być możliwy, ale przez wiele lat nie pisałem wiele używając jQuery i nigdy nie czułem się lepiej. Praca z poprawnie zorganizowanym frameworkiem jest 9000 razy ładniejsza niż praca nad modyfikacjami jQuery sklejanymi domami i nawet jeśli 'addEventListener' jest dłużej napisany, poprawnie wykonana struktura mogłaby zapobiec nawet tworzeniu jakiegokolwiek rodzaju detektora zdarzeń. Znajomość cech wewnętrznych jest dobra, aby przejść dalej. –

+0

Dziękuję Loïc i Antonowi za twoje odpowiedzi. Bardzo doceniane. –

10

Nie są one takie same. Możesz wypróbować:

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

, a funkcje 1 i funkcja 2 odpowiadają podczas zmiany rozmiaru okna.

Ale jeśli używasz

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

Tylko function2 reagować.