Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

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

Daniel Fitzhugh
Daniel Fitzhugh
9,715 Points
Posted by Daniel Fitzhugh
Daniel Fitzhugh
9,715 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
229,732 Points
Steven Parker
Steven Parker
229,732 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,715 Points
Daniel Fitzhugh
Daniel Fitzhugh
9,715 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
229,732 Points
Steven Parker
Steven Parker
229,732 Points

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

Daniel Fitzhugh
Daniel Fitzhugh
9,715 Points
Daniel Fitzhugh
Daniel Fitzhugh
9,715 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
229,732 Points
Steven Parker
Steven Parker
229,732 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,715 Points
Daniel Fitzhugh
Daniel Fitzhugh
9,715 Points

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

Samuel Ferree
Samuel Ferree
31,722 Points
Samuel Ferree
Samuel Ferree
31,722 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
229,732 Points
Steven Parker
Steven Parker
229,732 Points

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