CannoHarito/dispatchevent_with_promise.html

## dispatchevent_with_promise.html
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
</head>

<body>
    <button>dispatch</button>
    <div id="log">loading...</div>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            log('domcontetloaded', true);
            const myTarget = new EventTarget();
            myTarget.addEventListener('myEvent', (e) => {
                log('[' + Object.entries(e.detail).join('],[') + ']');
                if (e.detail.resolve) e.detail.resolve(e.detail.data + ' is processed.');
            });
            document.querySelector('button').addEventListener('click', () => {
                log('button clicked');
                new Promise((resolve, reject) => {
                    myTarget.dispatchEvent(new CustomEvent('myEvent', { detail: { data: 'promise', resolve, reject } }));
                }).then((res) => log('promise resoleved:' + res)).catch((res) => log('promise rejected:' + res));
                // myTarget.dispatchEvent(new CustomEvent('myEvent', { detail: { data: 'test', } }));
            });
        });

        const log = (str, clear = false) => {
            const dom = document.querySelector('#log');
            const html = new Date().toLocaleTimeString() + ' ' + str + '<br>';
            if (clear) dom.innerHTML = html;
            else dom.innerHTML += html;
        };

    </script>
</body>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="utf-8">
	</head>

	<body>
	<button>dispatch</button>
	<div id="log">loading...</div>
	<script>
	document.addEventListener('DOMContentLoaded', () => {
	log('domcontetloaded', true);
	const myTarget = new EventTarget();
	myTarget.addEventListener('myEvent', (e) => {
	log('[' + Object.entries(e.detail).join('],[') + ']');
	if (e.detail.resolve) e.detail.resolve(e.detail.data + ' is processed.');
	});
	document.querySelector('button').addEventListener('click', () => {
	log('button clicked');
	new Promise((resolve, reject) => {
	myTarget.dispatchEvent(new CustomEvent('myEvent', { detail: { data: 'promise', resolve, reject } }));
	}).then((res) => log('promise resoleved:' + res)).catch((res) => log('promise rejected:' + res));
	// myTarget.dispatchEvent(new CustomEvent('myEvent', { detail: { data: 'test', } }));
	});
	});

	const log = (str, clear = false) => {
	const dom = document.querySelector('#log');
	const html = new Date().toLocaleTimeString() + ' ' + str + '<br>';
	if (clear) dom.innerHTML = html;
	else dom.innerHTML += html;
	};

	</script>
	</body>

	</html>