Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript JavaScript and the DOM (Retiring) Responding to User Interaction What is an Event?

Daniel Fitzhugh
Daniel Fitzhugh
9,714 Points

Problem using the "load" event type

Hi,

I'm trying to add an event listener to a <DIV> using the event type "load", but the console.log behaviour doesn't work.

However --- if I change the event type from "load" to "click", the console.log behaviour does work. So I'm pretty sure that my syntax (below) is basically correct.

const divChessboardContainer = document.querySelector("div.chessboard-container");

divChessboardContainer.addEventListener( "load", () => {
    console.log("LOADED");
});

Is the "load" event-type reliable / are there problems with it? I've tried removing all of the links in my HTML file to external JS/CSS files etc but it still doesn't work.

2 Answers

Steven Parker
Steven Parker
210,423 Points

The "load" event can only be caught by the window, document, or elements that involve some kind of external resource (like "img'). A "div" element doesn't qualify to get a "load" event.

I can't seem to find this in MDN (my normal go-to reference), but here's a list of elements that can get a "load" event from w3schools:

<body>, <frame>, <iframe>, <img>, <input type="image">, <link>, <script>, <style>

Daniel Fitzhugh
Daniel Fitzhugh
9,714 Points

Hmmm, yeah I was thinking it might be something like that.

I just want the event handler to run immediately, without requiring any action from the user. "Load" was mentioned by the teacher in the video, so I assumed it would be straightforward to use.

Do any alternatives spring to mind?

Steven Parker
Steven Parker
210,423 Points

Any reason you can't attach it to the body?

Daniel Fitzhugh
Daniel Fitzhugh
9,714 Points

Do you mean like this ?

const bodyTag = document.querySelector("body");

bodyTag.addEventListener( "load", () => {

    console.log("LOADED");

});

I tried this and it didn't do anything. But again, if I change the event type to "click" it console.logged the word "LOADED" correctly.

Steven Parker
Steven Parker
210,423 Points

How is the script loaded? Maybe the body load event has already fired before the handler is attached?

But anyway, try attaching it directly to the window instead.

Daniel Fitzhugh
Daniel Fitzhugh
9,714 Points

Thanks, it worked when I used "window.addEventListener" :)

Samuel Ferree
Samuel Ferree
31,718 Points

try "ready" instead.

IIRC, there's some subtle different between assets being delivered to the browser ("loaded") and assets being interpreted ("ready")

Steven Parker
Steven Parker
210,423 Points

Are you sure "ready" is a DOM event? I haven't heard of that one. Perhaps you're thinking of the jQuery method?