急いでいます！

innerHTML実行後のイベント

締切済

質問者：だーーーーす
質問日時：2017/07/07 01:42
回答数：4件

innerHTMLを使って、bodyタグ内をかきかえて表示をしている(document.body.innerHTML = <><>)のですが、書き換えた事を検出するイベントってありますでしょうか(JS,JQueryなどで検出したいです)？書き換えた事をアラートするような動作をさせたいのですが。。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

最新から表示
回答順に表示

No.4

回答者： fujillin
回答日時：2017/07/07 14:20

ANo3です。

No3のサンプルの中の

＞//beforeRewriteイベントのハンドラ
＞document.addEventListener("beforRewrite",function(e){disp(e);},false);

＞ //afterRewriteイベントのハンドラ
＞document.addEventListener("afterRewrite",function(e){disp(e);},false);

の部分は

//beforeRewriteイベントのハンドラ
document.addEventListener("beforRewrite", disp, false);

//afterRewriteイベントのハンドラ
document.addEventListener("afterRewrite", disp, false);

で十分でしたね。
つい、勢いで書いてしまいました。（汗）

- 0
- 件

通報する

No.3

回答者： fujillin
回答日時：2017/07/07 11:53

こんにちは

＞書き換えた事を検出するイベントってありますでしょうか
通常のDOMイベントにはそのようなイベントは用意されていません。
それなので、ご質問の内容を実現しようとするなら、自分でカスタムイベントを作成する必要があります。
…というか、No1、2様がご指摘のように、innerHTML自体がjavascriptのメソッドなので、実行時点でそのタイミングはすでにつかめているはずではないでしょうか？

・・・というだけでは回答にならないので、お遊びで、カスタムイベントを発生する例を作ってみました。
・innerHTMLを書き換えるのはお行儀が悪すぎるので、代わりにMyInnerHTMLメソッドを定義しています。
　element.innerHTML = contents;
の代わりに
　element.MyInnerHTML(contents);
とすることでinnerHTMLが実行されますが、同時に、書き換え前にbeforRewriteイベント、書き換え後にafterRewriteイベントが発生するようになっています。
・例では、ボタンを押すと上記のMyInnerHTMLでDOMを書き換え、その時に発生するカスタムイベントをイベントリスナで取得してみるという形になっています。

詳しくは、以下あたりを手始めに、辿ってみてください
https://developer.mozilla.org/ja/docs/Web/API/Do …

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>

<script type="text/javascript">
//MyInnerHTMLの定義
HTMLElement.prototype.MyInnerHTML = function(contents){
var evt = document.createEvent("HTMLEvents");
evt.initEvent("beforRewrite", true, true);
this.dispatchEvent(evt);
this.innerHTML = contents;
evt.initEvent("afterRewrite", true, true);
this.dispatchEvent(evt);
}

//イベント表示用関数
function disp(e){
alert(e.target.nodeName + "要素で" + e.type + "イベントが発生");
}

//beforeRewriteイベントのハンドラ
document.addEventListener("beforRewrite",function(e){disp(e);},false);

//afterRewriteイベントのハンドラ
document.addEventListener("afterRewrite",function(e){disp(e);},false);

//ボタンをクリックしたらMyInnerHTMLで書き換え
function buttonClick(elm){
elm.parentNode.MyInnerHTML(elm.value.substr(1));
}
</script>
</head>
<body>

<p>test1
<input type="button" value="→hoge" onclick="buttonClick(this)" />
</p>

<div>test2
<input type="button" value="→fuga" onclick="buttonClick(this)" />
</div>

</body>
</html>