javascript - 動的に生成された DOM 要素の onclick メソッドを取得する

Question

次のように、onclick メソッドを使用してページに画像を動的に追加しています。

var image = document.createElement("img");
image.src = "image.png";
image.onclick = function(){
    doSomething();
}

parent.appendChild(image);

これはすべてうまくいきます。ただし、 onclick メソッドを使用して、生成された HTML を (PHP スクリプトを介して) 保存したいと思います。私はparent.innerHTMLを使ってみましたが、それは画像を返しますが、onclickはありません。

私は得ています：

...<img src="image.png" />...

私が欲しいのは、次のようなものです。

...<img src="image.png" onclick="doSomething()" />...

誰かがこれを達成する方法を見つけるのを手伝ってくれますか? ありがとう。

score 2 · Accepted Answer

それは実際には不可能です。生きている関数インスタンスは、そのすべてのスコープ環境およびその他の内部またはパブリックプロパティでシリアル化できません。次のようなことをして、そのコードを取得することしかできませんでした

image.setAttribute(
  "onclick",
  image.onclick.toString().replace(/^function\s*([^)]*)\s*\{?|\}$|\n/g, "")
);
return image.outerHTML;

score 1 · Accepted Answer

<script>タグまたは外部ファイルのいずれかで要素属性の外部にスクリプトを記述している場合、そのスクリプトがHTMLに複製されることはありません。私の知る限り、あなたが探していることは不可能です。

onclick関数をHTMLに直接記述し、それを抽出すると、それは機能します。

2 に答える 2