Funktion innerhalb von addEventListener aufrufen

[ebody]

Hallo,

ich rufe 2 Funktionen mit onclick im HTML Code auf:

<a href="https://codepen.io/" onclick="beforeDOM(); afterDOM();">addEventListener</a>

Die Funktion liegt innerhalb eines Event Listeners:

<script>
window.addEventListener('load', (event)=>{
function beforeDOM(){
  console.log('Before DOM!');
}
});
</script>
<p><a href="https://codepen.io/" onclick="beforeDOM(); afterDOM();">addEventListener</a></p>
<script>
window.addEventListener('load', (event)=>{  
  console.log('load!', event);
  
  function afterDOM(){
    console.log('After DOM!');
  }
  
});
</script>

Diese Zeile wird ausgeführt, wenn ich die Seite lade:

console.log('load beforeDOM!', event);

Dennoch ist die Funktionen nicht bekannt:

beforeDOM is not defined

Ich hätte jetzt vermutet, dass das Problem darin liegt, das onclick="beforeDOM()" zu erst geladen wird, zu diesem Zeitpunkt beforeDOM() noch nicht geladen wurde und daher nicht bekannt ist.

Aber das Problem besteht auch, wenn die Funktion innerhalb einer anderen Funktion liegt:

<a href="https://codepen.io/" onclick="beforeDOM2(); afterDOM2();">Function</a>

<script>
(function(){  
  
  function beforeDOM2(){
    console.log('Before DOM 2!');
  }
  
});
</script>
<p><a href="https://codepen.io/" onclick="beforeDOM2(); afterDOM2();">Function</a></p>
<script>
(function(){  
  
  function afterDOM2(){
    console.log('After DOM 2!');
  }
  
});
</script>

Wenn möglich, würde ich das Script erst am Ende des </body> ausführen. Aber warum werden die Funktionen nicht erkannt?

Gruß ebody