Ereignis-Listener und lokaler Datenspeicher

Question

Kann ich die von einem Ereignis über eine Listener-Funktion empfangenen Daten in eine Variable in meiner HTML-Datei (ich meine außerhalb des Bereichs der Listener-Funktion) speichern?

<div id="id1"></div> 
<script> 
    var a = document.querySelector('#id1'); 
    a.addEventListener('fooEvent', function(e){ 
     console.log(e.detail); 
    }); 
    var event = document.createEvent("CustomEvent"); 
    var data = "[1,2,3]"; 
    event.initCustomEvent("fooEvent", true, true, data); 
    a.dispatchEvent(event); 
</script> 

JSFIDDLE: https://jsfiddle.net/dtxwr6h9/

In diesem Beispiel möchte ich außerhalb der Listener-Funktion Zugriff auf die e.detail Daten haben. Ist das irgendwie möglich?

Vielen Dank im Voraus!

Answer 1

Sicher. Speichern Sie es einfach in einer Variablen oder in localStorage mit JSON.stringify, nachdem Sie das Ereignis erfasst haben. Binden Sie anschließend den Event-Handler bei Bedarf los.

z.

<script> 
    // variable here for storage 
    var storedObj; 
    var a = document.querySelector('#id1'); 
    a.addEventListener('fooEvent', function(e){ 
     console.log(e.detail); 
     // store it in your outer scoped variable, or localStorage, if you prefer. 
     storedObj = e.detail; 
    }); 
    var event = document.createEvent("CustomEvent"); 
    var data = "[1,2,3]"; 
    event.initCustomEvent("fooEvent", true, true, data); 
    a.dispatchEvent(event); 
</script>