Aquí hay una pequeña sección de código que proporciona la introducción , que funciona como se esperaba. El event.currentTarget es lo mismo que si hiciera clic directamente en el botón.
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 parece ser el elemento desde donde se envió el evento, no el elemento donde se invocó el envío.
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>Idealmente, quiero usar un oyente global que maneje múltiples propósitos y verifique por event.target si se hizo clic en ese botón.
Entonces, ¿cómo puedo diferenciar entre cualquier otro clic y el evento de envío para el botón mientras sigo usando un detector de eventos global?
¡Se puede encontrar una demostración un poco más detallada en codepen!
Creo que la pregunta real es cómo hacer que un evento activado burbujee en un árbol. Use MouseEvent y configúrelo para que burbujee.
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>