jQuery code .load, .scroll, .ready equivalent Vanilla Javascript Code

Question

I am migrating my jquery code to Vanilla javascript, but I have problems with these three functions.

how to convert my jquery code to vanilla js?

(function($){

    // Load
    $(window).load(function() {
        console.log("Load...");
    });

    // Scroll
    $(window).scroll(function() {
        console.log("Scroll...");
    });

    // Documente Ready
    $(document).ready(function() {
        console.log("Scroll...");
    });

})(jQuery);

My code Vanilla JS, but I only have one:

//VANILLA JAVASCRIPT
document.addEventListener('DOMContentLoaded', function () {
    console.log("¡Estamos en vivo!");
});

Does this answer your question? [What is the non-jQuery equivalent of '$(document).ready()'?](https://stackoverflow.com/questions/2304941/what-is-the-non-jquery-equivalent-of-document-ready) — Nux, Aug 03 '20 at 13:22

score 2 · Accepted Answer · answered Jun 06 '20 at 18:55

2

Please take the time to Google it by your own next time. All the answers are already on SO but in several questions so I can flag yours as a duplicate

document.addEventListener("load", myScript);
document.addEventListener("scroll", myScript);
document.addEventListener("DOMContentLoaded", myScript);

answered Jun 06 '20 at 18:55

johannchopin

13,720
10
55
101

Actually those are not equivalent. jQuery version will be fired when document was ready when you define the listener. DOMContentLoaded only fires if you added event handle before load. So if you run this in console it will always show the log: `$(document).ready(function() {console.log("test ready");});` – Nux Aug 03 '20 at 13:06
For equivalents see: https://stackoverflow.com/a/53601942/333296 – Nux Aug 03 '20 at 13:21

jQuery code .load, .scroll, .ready equivalent Vanilla Javascript Code

1 Answers1