I know how trigger a function when an element loads in with jQuery but can't seem to figure it out in pure Javascript. I would like to do this is JS.
So I know how to fire a function in jQuery when an element loads but I want to do it in Javascript. I would like to do this is pure Javascript.
$('img').load(
function(){
//do stuff
})
From the MDN documentation of the load event:
The load event is fired when a resource and its dependent resources have finished loading.
As mentioned in the comments, an input element has no dependent content to load, hence a load event for it will never trigger.
It's important to understand that all elements do need to be parsed into the Document's Object Model, but that is a process that must complete before you can programmatically interact with the element in the first place.
Once the client has finished parsing all the elements in the DOM, the client will fire off its "DOMContentLoaded" event (equivalent to the JQuery $(document).ready event shown in the W3 Schools example you linked to). It is at this point that it is safe to search through the DOM and locate elements to be worked with.
From there, different elements can/will have different events that can occur on them during their lifetime. An input element will respond to user input and interactions, so it has several different events to tie into them (input, change, keydown, keyup, keypress, mouseup, mousedown, focus, blur, etc.).
For a load event, you need to work with elements that contain content that needs to be loaded into them after the element itself has been created. Examples would be window, img, iframe, link. These are all elements that need external content for them to be of any use to anyone.
So, take an element like an img which needs to load an external resource and the pure JavaScript would use the native DOM API way to register event callbacks, which is with the element.addEventListener() method.:
// Get a reference to the DOM element.
// Make sure this is done AFTER the DOM has finished loading:
var img = document.getElementById("someImgageElementsID");
// Register a function to the image's load event handlers:
img.addEventListener("load", doLoad);
// Declare the callback function:
function doLoad(){
console.log("image loaded");
}
More on element events.
onloadhandler, nor does it have children.$('input'), then it is already "loaded", i.e. ready.