17 lip 2018

DOMContentLoaded async

Niestety jeżeli używamy async DOMContentLoaded nam nie zadziała.

<script type="text/javascript" src="./index.6da4.js" async>

Trochę mi zajęło zanim odkryłem ten problem. Lokalnie wszystko działało bo w webpaku w wersji developerskiej nie używam pluginu który dodaje async do script. Dopiero wersja produkcyjna posiada tą zmianę.

document.addEventListener("DOMContentLoaded", function() {
   const contact = new FormValidate('form');
   contact.init();
});

Przeszukanie sieci doprowadziło mnie do tego rozwiązania, działa nawet w IE9.

document.addEventListener('readystatechange', () => {
    if (document.readyState == "complete") {
        const contact = new FormValidate('form');
        contact.init();
    }
});
8 lip 2018

addEventListener wiele zdarzeń

Zamiast wywoływać dwa razy tą samą funkcję.

document.addEventListener("click", taSamaFunkcja);
document.addEventListener("touchstart", taSamaFunkcja);

Możemy to zrobić tak jak poniżej

["change", "keyup", "click", "touchstart", "input", "..."].forEach(function(event) {
  document.querySelectorAll('.element').addEventListener(event, function() {
    // i tutaj co potrzeba
  }, false);
});