html5 onload div,javascript - How to add onload event to a div element - Stack Overflow

In November 2019, I am seeking a way to create a (hypothetical) onparse EventListener for which don't take onload.

The (hypothetical) onparse EventListener must be able to listen for when an element is parsed.

Third Attempt (and Definitive Solution)

I was pretty happy with the Second Attempt below, but it just struck me that I can make the code shorter and simpler, by creating a tailor-made event:

let parseEvent = new Event('parse');

This is the best solution yet.

The example below:

Creates a tailor-made parse Event

Declares a function (which can be run at window.onload or any time) which:

Finds any elements in the document which include the attribute data-onparse

Attaches the parse EventListener to each of those elements

Dispatches the parse Event to each of those elements to execute the Callback

Working Example:

// Create (homemade) parse event

let parseEvent = new Event('parse');

// Create Initialising Function which can be run at any time

const initialiseParseableElements = () => {

// Get all the elements which need to respond to an onparse event

let elementsWithParseEventListener = document.querySelectorAll('[data-onparse]');

// Attach Event Listeners and Dispatch Events

elementsWithParseEventListener.forEach((elementWithParseEventListener) => {

elementWithParseEventListener.addEventListener('parse', updateParseEventTarget, false);

elementWithParseEventListener.dataset.onparsed = elementWithParseEventListener.dataset.onparse;

elementWithParseEventListener.removeAttribute('data-onparse');

elementWithParseEventListener.dispatchEvent(parseEvent);

});

}

// Callback function for the Parse Event Listener

const updateParseEventTarget = (e) => {

switch (e.target.dataset.onparsed) {

case ('update-1') : e.target.textContent = 'My First Updated Heading'; break;

case ('update-2') : e.target.textContent = 'My Second Updated Heading'; break;

case ('update-3') : e.target.textContent = 'My Third Updated Heading'; break;

case ('run-oQuickReply.swap()') : e.target.innerHTML = 'This <div> is now loaded and the function oQuickReply.swap() will run...'; break;

}

}

// Run Initialising Function

initialiseParseableElements();

let dynamicHeading = document.createElement('h3');

dynamicHeading.textContent = 'Heading Text';

dynamicHeading.dataset.onparse = 'update-3';

setTimeout(() => {

// Add new element to page after time delay

document.body.appendChild(dynamicHeading);

// Re-run Initialising Function

initialiseParseableElements();

}, 3000);

div {

width: 300px;

height: 40px;

padding: 12px;

border: 1px solid rgb(191, 191, 191);

}

h3 {

position: absolute;

top: 0;

right: 0;

}

My Heading

My Heading

This div hasn't yet loaded and nothing will happen.

Second Attempt

The First Attempt below (based on @JohnWilliams' brilliant Empty Image Hack) used a hardcoded and worked.

I thought it ought to be possible to remove the hardcoded entirely and only dynamically insert it after detecting, in an element which needed to fire an onparse event, an attribute like:

data-onparse="run-oQuickReply.swap()"

It turns out, this works very well indeed.

The example below:

Finds any elements in the document which include the attribute data-onparse

Dynamically generates an and appends it to the document, immediately after each of those elements

Fires the onerror EventListener when the rendering engine parses each

Executes the Callback and removes that dynamically generated from the document

Working Example:

// Get all the elements which need to respond to an onparse event

let elementsWithParseEventListener = document.querySelectorAll('[data-onparse]');

// Dynamically create and position an empty after each of those elements

elementsWithParseEventListener.forEach((elementWithParseEventListener) => {

let emptyImage = document.createElement('img');

emptyImage.src = '';

elementWithParseEventListener.parentNode.insertBefore(emptyImage, elementWithParseEventListener.nextElementSibling);

});

// Get all the empty images

let parseEventTriggers = document.querySelectorAll('img[src=""]');

// Callback function for the EventListener below

const updateParseEventTarget = (e) => {

let parseEventTarget = e.target.previousElementSibling;

switch (parseEventTarget.dataset.onparse) {

case ('update-1') : parseEventTarget.textContent = 'My First Updated Heading'; break;

case ('update-2') : parseEventTarget.textContent = 'My Second Updated Heading'; break;

case ('run-oQuickReply.swap()') : parseEventTarget.innerHTML = 'This <div> is now loaded and the function oQuickReply.swap() will run...'; break;

}

// Remove empty image

e.target.remove();

}

// Add onerror EventListener to all the empty images

parseEventTriggers.forEach((parseEventTrigger) => {

parseEventTrigger.addEventListener('error', updateParseEventTarget, false);

});

div {

width: 300px;

height: 40px;

padding: 12px;

border: 1px solid rgb(191, 191, 191);

}

My Heading

My Heading

This div hasn't yet loaded and nothing will happen.

First Attempt

I can build on @JohnWilliams' hack (on this page, from 2017) - which is, so far, the best approach I have come across.

The example below:

Fires the onerror EventListener when the rendering engine parses

Executes the Callback and removes the from the document

Working Example:

let myHeadingLoadEventTrigger = document.getElementById('my-heading-load-event-trigger');

const updateHeading = (e) => {

let myHeading = e.target.previousElementSibling;

if (true) { // <= CONDITION HERE

myHeading.textContent = 'My Updated Heading';

}

// Modern alternative to document.body.removeChild(e.target);

e.target.remove();

}

myHeadingLoadEventTrigger.addEventListener('error', updateHeading, false);

My Heading