nicht angemeldet
Rolf BHallo ebody,
nein, (Jedi-Memorytrick Handbewegung) du möchtest das nicht mit onclick machen.
Das ist nicht der Droide, ahem, die Registrierung, nach der Du suchst.
Du möchtest addEventListener verwenden.
Spaß beiseite - du kapselst afterDOM doch in einer anderen Funktion, um den globalen Namespace nicht zuzuschütten, ja? Und dann geht onclick nicht, weil onclick nur globale Funktionen aufrufen kann.
Wenn Du die Registrierung am Ende des <body> notierst, ist das a Element bereits im DOM und Du kannst es mit getElementById finden. Wenn die Handler-Funktion nur einmal gebraucht wird, kannst Du sie auch gleich als anonyme Funktion übergeben und brauchst Dich um Scope-Vermüllung nicht zu bekümmern.
<a id="codepenLink" href="...">Click Me Or Click Me Not, See If I Care</a>
<script>
document.getElementById("codepenLink")
.addEventListener("click", function(event) {
console.log("I don't care!");
});
</script>
Das sieht natürlich etwas anders aus, wenn Du mit dem Elementobjekt des Links mehr machen willst als nur einen Click-Handler anzukleben, oder wenn die Handlerfunktion für mehrere Elemente registriert werden soll. Dann brauchst Du Variablen oder auch Funktionen, und dann sollte das Ganze in einer IIFE oder einem type=module Script liegen (Überraschung: Module gibts im IE nicht)
Exkurs: wenn Du die Handlerfunktion nur für ein a Element registrieren willst, dann bist Du damit fertig.
Aber wenn Du mehrere a Elemente hast und bei allen auf click reagieren willst, dann registriere den click-Handler auf dem Container und lass die click-Events dorthin blubbern. Du musst dann nur auf dem Target-Objekt abfragen, ob es ein Link ist.
(function() {
const cpLink = document.getElementById("codepenLink");
cpLink.addEventListener("click", clickHandler);
function clickHandler(event) {
console.log("I don't care!");
}
})();
Und wenn Du mit Bubbling arbeiten willst - und der Container bspw. der ganze body ist, kommst Du ggf. auch wieder ohne IIFE aus:
document.body.addEventListener("click", function(event) {
if (event.target.matches("a[href]")) {
console.log("I still don't care!");
}
});
Allerdings - Vorsicht mit event.target, wenn im a Element noch Kind-Elemente stehen.
<a href="#">Guten <b>Tag</b></a>
Klickst Du auf "Guten", ist event.target das a Element. Klickst Du auf "Tag", ist event.target das b Element. D.h. man muss nicht event.target prüfen, sondern event.target.closest("a[href]") - was natürlich nicht unbedingt existiert. Und closest gibt's wieder im IE nicht, d.h. Du brauchst ggf. einen Polyfill dafür. Es ist schon nervig.
Rolf
sumpsi - posui - obstruxi