包まれたクリッカブルDivElement：イベントは

Question

をしてください聞いていない、少し、次のコードを検討：私は「onclickの」HTML属性を追加しようとしている

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; 
    }; 
} 

を「移動（）;」値として。このmoveの値は、実際には「Clicked！」と警告する機能です。最終ユーザーがこのHTML要素をクリックしたとき。

しかし、動作しません。ソースを調べると、このHTML要素にはプロパティonclickが追加されていないようです。

なぜこの問題を解決できるのかわかりますか？

Answer 1

document.body.innerHTML += this.html_element.outerHTML;が問題です。これは、要素をページに追加する最悪の方法です。

あなたのハンドラは、HTMLとは何の関係もありませんので、あなたはouterHTML呼び出しでHTMLに要素をシリアル化するとき、それが失われています。あなたがシリアライズとdocument.body下すべてノードを破壊し、それらがあまりにもハンドラやその他のデータを失うことになります新しいノード、に戻ってそれらを回していることは言うまでもありません。

代わりにちょうどElementノードを追加するために.appendChild()を使用してください：

document.body.appendChild(this.html_element) 

はまた、あなたが持つMovable.prototype.moveがありますしない限り、単にundefinedを割り当てるなる、あなたはそれを作成前にハンドラとしてthis.moveを代入していますハンドラ。

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); 
    }; 
}