Javascript: Set eventListener to DOM object without window.onload?

Question

My index.html include two javascript codes which are plugin.js and main.js(main include after plugin),
I want to make plugin.js as a reusable plugin, like checking if the index.html file has any elements which have click-me class attribute, if index.html has this kind of elements, then set every this kind of elements an eventListener.

I want my window.onload function ALWAYS in main.js rather than plugin.js, but in this case I cant' get DOM object by className in plugin.js, I also don't want to call any function of plugin.js in main.js.

Does anyone ahs any idea?

What about delegating these events: https://learn.jquery.com/events/event-delegation/ ? — A. Wolff, Dec 07 '16 at 10:15
If you are using jQuery, why in the world would you need to use `window.onload`, `$(document).ready(...` is more than sufficient. — zer00ne, Dec 07 '16 at 10:21
It looks like write `$(document).ready(...` in to different javascript file won't overwrite each other~! I guess I have to get more used to Jquery. Thanks! — FlyC, Dec 07 '16 at 10:41

score 2 · Answer 1 · edited May 23 '17 at 12:01

2

You can just include the scripts after the body.

<body>
</body>
<!-- add your scripts here -->

Then you don't need to check if the document is ready anymore, this has the drawback of only starting the download after the page is fully rendered.

Another possibility is using defer

<script type="text/javascript" src="plugin.js" defer></script>
<script type="text/javascript" src="main.js" defer></script>

This way scripts are downloaded as soon as possible but are executed only after the page is ready, and in order.

A more detailed answer here

edited May 23 '17 at 12:01

Community

1
1

answered Dec 07 '16 at 10:35

Tiago Engel

3,533
1
17
22

Nice answer :) I changed `before` to `after` in your post, I hope that's correct. – Tomáš Zato Dec 07 '16 at 11:12
Yes yes, don't know why I wrote `before`, think I need some coffee :). thanks – Tiago Engel Dec 07 '16 at 12:19
thanks, but I can't assume every people use my `plugin.js` will put ` – FlyC Dec 12 '16 at 02:22
You can if you tell then so, but if you want to give your users the *freedom* to put the script whatever they want, then yes, is better to go with @TomášZato answer. – Tiago Engel Dec 12 '16 at 10:12

score 1 · Accepted Answer · answered Dec 07 '16 at 11:11

Well, you should properly use onload as an event listener:

window.addEventListener("load", function() {

});

This can be added as many times as you wish, both in main.js and plugin.js.

Additionally, it's better to use DOMContentLoaded event, because it doesn't wait on loading images. That's really important, if you rely on window.onload, just one pending image can make your page useless for first 10 seconds of the visit. It's used like this:

  document.addEventListener("DOMContentLoaded", function(event) {
    console.log("DOM fully loaded and parsed");
  });

It has compatibility issues however, so I recommend using some library.

Oh and last thing - don't link your scripts before body unless needed. They block parsing of the page.

it seems that `addEventListener()` won't over write each other, but it still follow the sequence of my ` — FlyC, Dec 12 '16 at 02:25

score -1 · Answer 3 · answered Dec 07 '16 at 10:42

-1

Why don't you just check if the clicked element have the click-me class from the root? It makes you declare only one listener on the body.

function listener(event) {
    if(event.target.classList.contains("click-me")) {
        // Do something
    }
}
document.body.addEventListener("click", listener, true);

answered Dec 07 '16 at 10:42

Kulvar

1,139
9
22

sor, but I don't want make a `onclick` function to body, because I 'm not sure if I will need that in my `main.js` – FlyC Dec 08 '16 at 09:01

Javascript: Set eventListener to DOM object without window.onload?

3 Answers3