Here is a little code section providing the intro, which works as expected. The event.currentTarget is the same as if I directly clicked on the button itself.
var button1 = document.querySelector('.button1');
button1.addEventListener('click', function (e) {
alert(`Button1 was clicked!\nEvent currentTarget: ${e.currentTarget} .${e.currentTarget.className}`);
});
var event = new Event('click');
button1.dispatchEvent(event);<p>if you load the page a button click will be dispatched</p>
<button class="button1">Button1: If you click me I wil open an alert</button>
<p>Expected Output: "Button1 was clicked! [object HTMLButtonElement] .button1"</p>Event.currentTarget seems to be the element from where the event was dispatched from, not the element where dispatch was called on.
var button1 = document.querySelector('.button1');
document.addEventListener('click', function (e) {
alert(`Button1 was clicked!\nEvent.currentTarget: ${e.currentTarget} .${e.currentTarget.className}`);
});
var event = new Event('click');
button1.dispatchEvent(event);<p>Click anywhere besides the button itself to see the difference!</p>
<button class="button1">Button1: If you click me I wil open an alert</button>
<p>Expected Output: "Button1 was clicked! [object HTMLButtonElement] .button1"</p>
<p>Actual Output: "Button1 was clicked! [object HTMLHtmlElement]"</p>Ideally I want to use a global listener handling multiple purposes and check per event.target if that button was clicked.
So how can I differentiate between any other clicks and the dispatch event for the button while still using a global event listener
I think the actual question is how to make an event triggered bubble up a tree? Use MouseEvent and set it to bubble.
var button1 = document.querySelector('.button1');
document.addEventListener('click', function (e) {
console.log( e.target.nodeName, e.currentTarget.nodeName);
});
const event = new MouseEvent("click", {
view: window,
bubbles: true,
cancelable: true,
});
button1.dispatchEvent(event);<button class="button1">Click</button>