Event-handler für resize.

DanielDD · 13.02.2024

Hallo Leute,

ich will einen event-handler für resize erstellen. Ich habe jetzt folgenden Code zum testen:

Javascript:

var DKr = document.querySelector(':root');

function DK_alert() {alert('Test.')}

document.addEventListener('DOMContentLoaded', function () {
        DKr.addEventListener('resize', DK_alert )});

Ich will keine inline-event-handler einsetzen, weil ich eine starke
CSP einsetzen will.

1. Der Alarm wird nicht ausgeführt. Wenn ich in der letzten Zeile
statt 'resize' 'click' oder 'wheel' angebe, dann wird der alarm
erwartungsgemäß beim Klicken oder beim Mausrad drehen ausgelöst.
Wie erreiche ich, dass der Alarm bei resize ausgelöst wird?

2. Warum muss ich als event 'DOMContentLoaded' angeben. Das habe
ich von csp withgoogle com/docs/adopting-csp.html übernommen.
Dieses event gibt es hier www w3schools com/jsref/dom_obj_event.asp
gar nicht.

DanielDD

DanielDD · 13.02.2024

Ich habe jetzt selbst eine Lösung gefunden. Man muss nur in der letzten Zeile das DKr durch window ersetzen:

Javascript:

var DKr = document.querySelector(':root');

function DK_alert() {alert('Test.')}

document.addEventListener('DOMContentLoaded', function () {
        window.addEventListener('resize', DK_alert )});

Die erste Zeile kann dann entfallen, sofern DKr nicht anderweitig benötigt wird.

Es wäre trotzdem mal interessant, was Experten dazu sagen.

DanielDD

Sempervivum · 13.02.2024

Das :root kenne ich nur im Zusammenhang mit CSS. Für "resize" benutze ich auch immer window.

Dieses: document.addEventListener('DOMContentLoaded', function () { brauchst Du nur, wenn Du das Javascript in den Head stellst um sicher zu stellen, dass alle DOM-Elemente da sind wenn Du darauf zugreifst. Stellst Du das JS an das Ende des body ist es überflüssig.

AndreasB · 14.02.2024

document.querySelector(':root'); gibt dir den Root Knoten des DOMs zurück, was in deinem Fall das <html> Element ist.
Das resize Event wird nur auf dem Window Objekt gefeuert, also ist deine Anpassung die Richtige gewesen.

Das Event DOMContentLoaded wird gefeuert, sobald das komplette HTML Geparsed und alle Scripte (auch die mit defer und async) geladen sind.
Wenn es also wichtig ist, dass ein Script erst dann ausgeführt wird, hilft dieses Event.