Wrapped klickbare DivElement: Ereignis wird nicht zugehört

Question

Bitte beachten Sie, den kleinen folgenden Code:

function Movable(x, y, width, height, background_color) { 
    this.html_element = document.createElement("div"); 

    this.html_element.onclick = this.move; 
    this.move = function() { 
     alert("Clicked !"); 
    }; 

    this.display = function() { 
     document.body.innerHTML += this.html_element.outerHTML; 
    }; 
} 

Ich versuche, das HTML-Attribut "Onclick" mit hinzuzufügen "move();" als Wert. Dieser move Wert ist tatsächlich eine Funktion, die "Clicked!" wenn der Endbenutzer auf dieses HTML-Element klickt.

Aber es funktioniert nicht. Wenn ich die Quelle überprüfe, scheint es, dass die Eigenschaft onclick diesem HTML-Element nicht hinzugefügt wird.

Wissen Sie, warum und wie ich dieses Problem lösen könnte?

Answer 1

document.body.innerHTML += this.html_element.outerHTML; ist das Problem. Das ist nur der schlechteste Weg, ein Element zu einer Seite hinzuzufügen.

Ihr Handler hat nichts mit HTML zu tun, daher geht er verloren, wenn Sie das Element mit dem Aufruf outerHTML in HTML serialisieren. Nicht zu erwähnen, dass Sie alle die Knoten unter dem document.body serialisieren und zerstören, und sie dann in neue Knoten zurück verwandeln, die sie Handler und andere Daten auch verlieren lassen.

Stattdessen tun nur .appendChild() verwenden, um den Knoten Element hinzufügen:

document.body.appendChild(this.html_element) 

Auch sind Sie this.move als Handler vor zuweisen Sie es schaffen, die undefined nur vergeben werden, es sei denn es eine Movable.prototype.move mit einem ist Handler.

function Movable(x, y, width, height, background_color) { 
    this.html_element = document.createElement("div"); 

    this.move = function() { 
     alert("Clicked !"); 
    }; 

    this.html_element.onclick = this.move; 

    this.display = function() { 
     document.body.appendChild(this.html_element); 
    }; 
}