JS: Eventhandler an Klasseninstanzen

DocJunioR

Hallo,
ich bastle gerade eher aus Neugier und Langeweile denn aus Sinn und zweck an einem simplen Javascript basierten UI. Jaaa, sicher gibts da schon tausende tolle Frameworks aber ich will plain Javascript machen..

Ich habe also angefangen, mir ein einfaches Widget zu schreiben und dieses dann mit einem Event zu versehen. Irgendwie kommt der Event aber total durcheinander..
Hier erst mal der Code

class Widget {
    /** this is a simple widget
     */
    constructor(text="HELLORLD", classes=Array()) {
        /** draw yourself
         */
        this.text = text;
        this.node = document.createElement("div");
        this.node.classList.add(this.constructor.name);
        for ( var i = 0; i < classes.length; i++ ) {
            this.node.classList.add(classes[i]);
        }
        this.node.appendChild(document.createTextNode(this.text));
        this.node.addEventListener("click", () => this.onClick());
    }


    draw() {
        /**
         */
        return this.node;
    }

    onClick() {
        /**
         * onClick handler.
         * override if neccessary
         */
        console.debug( this.text + " Clicked");
    }

    onClose() {
        /**
         * widget close handler
         */
        console.debug( this.text + " closed");
    }
}

Das HTML sieht dann so aus:

<!DOCTYPE html>
<html lang="en">
<script src="wgui.js"></script>
<link rel="stylesheet" href="wgui.css">
<head>
<meta charset="utf-8" />
<title>unbenannt</title>
<meta name="generator" content="Geany 1.38" />
</head>

<body>
    <div id="main" style="display:block;width:100%;height:100%">
    </div>
<script type="text/javascript">
    main = document.getElementById("main");
    text1 = new Widget();
    text2 = new Widget("Nochntext");
    text3 = new Widget();
    main.appendChild(text1.draw());
    main.appendChild(text2.draw());
    main.appendChild(text1.draw());
</script>
</body>

</html>

Das Verhalten ist nun recht seltsam (Firefox) Klicke ich auf das erste Widget dann funktioniert das ein mal und dann nie wieder.
Klicke ich eines der beiden anderen dann wird dieses immer zusammen mit dem davor liegenden getriggert.
Was genau mache ich hier falsch?

hustbaer

@DocJunioR sagte in JS: Eventhandler an Klasseninstanzen:

    main.appendChild(text1.draw());
    main.appendChild(text2.draw());
    main.appendChild(text1.draw());

Probier's mal mit

    main.appendChild(text1.draw());
    main.appendChild(text2.draw());
    main.appendChild(text3.draw());

DocJunioR

Das nenn ich mal Betriebsblindheit :-D...

Jetzt tut das zumindest halbwegs sauber.
Abgesehen davon habe ich nun aber ein anderes Problem: Ich kann keinen Event zwei Mal hintereinander feuern.