addEventListener on a body element does not get executed

Question

I am using MS Edge in IE11 compatibility mode and have an HTML page in which I have:

<input id="onLoadAttributeHiddenId" type="hidden" value="schadenAuswahl.setCustomCheck();schadenAuswahl.createArrays();"> 

Further below, I have also:

<script language="JavaScript1.1" src="../js/table_head_uip.js"></script>

And in the table_head_uip.js , I have:

document.body.addEventListener('load', customOnLoadFunction, false);

function customOnLoadFunction(){
    var onLoadAttributeFunctStr = document.getElementById("onLoadAttributeHiddenId").value;

    var onLoadAttributeFunct = new Function(onLoadAttributeFunctStr);
    onLoadAttributeFunct; 
}

Now, when I put breakpoints in the table_head_uip.js , the line.

   var onLoadFunct = document.body.addEventListener('load', customOnLoadFunction, false);

It gets executed, but the function customOnLoadFunction never gets completed. Also, I do not receive any errors in the console.

Any help will be appreciated.

Answer 1

load events only fire on elements which load things (like an <img> with a src attribute) and the window object (for when the entire document, including its dependencies, has loaded).

The body element doesn't load anything.

The equivalent of the obsolete onload attribute for the body is a load event that fires on the window object. That attribute only existed because, since window isn't an element, you couldn't put attributes on it.

---

Additionally, the statement onLoadAttributeFunct doesn't do anything. To be useful you need to, for example, put () after it to call it.

new Function(onLoadAttributeFunctStr) is effectively a time delayed eval and is considered dangerous, slow, and hard to debug. You should reconsider the design of your application if you need that.