3schools

Table Maker3schools TranslateImage CompressorFavicon Icon GeneratorCrop & Resize Image
Apu
Apu January 19, 2024 . #HowTo . #Javascript
❌

Add multiple window.onload events

Hey everyone, I've been trying to figure out how to add multiple window.onload events to my web page, but I'm having trouble getting it to work. Here's the code I'm working with:

<script>
 window.onload = function() {
    // Code for the first onload event
 };

 window.onload = function() {
    // Code for the second onload event
 };
</script>

The problem is that only the second window.onload event seems to work. Can someone help me understand why this is happening and how I can add multiple window.onload events?

save
listen
AI Answer
5 Answers
  1. I see the issue here, When you assign a new function to window.onload, it overwrites the previous one. To add multiple window.onload events, you can use the addEventListener method like this:
    window.addEventListener('load', function() {
        // Code for the first onload event
    });

    window.addEventListener('load', function() {
        // Code for the second onload event
    });
    This way, both functions will be executed when the page loads.
    • That's a great solution, But what if I also want to remove one of these load event listeners later in my code?
    • To remove an event listener, you can use the removeEventListener method. Here's an example of how you can remove the second load event listener:
      function secondLoadEvent() {
          // Code for the second onload event
      }

      window.addEventListener('load', function() {
          // Code for the first onload event
      });

      window.addEventListener('load', secondLoadEvent);

      // Later in your code, you can remove the second event listener like this:
      window.removeEventListener('load', secondLoadEvent);
    • I have one more question. What if I want to pass some data to my event handler functions?
    • You can pass data to your event handler functions using closures. Here's an example:
      function createLoadHandler(data) {
          return function() {
              // Code that uses the data
      };
      }

      let myData = "Some data";

      window.addEventListener('load', createLoadHandler(myData));
      This way, you can access myData within your event handler function.
    Reply Delete
    Share
    Reply Delete
    Share
Write Your Answer
loading
back
View All