A 回答 (4件)
- 最新から表示
- 回答順に表示
No.4
- 回答日時:
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);
で十分でしたね。
つい、勢いで書いてしまいました。(汗)
No.3
- 回答日時:
こんにちは
>書き換えた事を検出するイベントってありますでしょうか
通常の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>
No.2
- 回答日時:
書き換えの命令のあとに任意のイベントをトリガーすれば検出はできますが、
実際に画面に描画されたあとかどうかは保証できないので、やりたいことによっては不十分かもしれないです。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript javascriptでテーブルに追加した項目のid追加してローカルストレージを操作したい 5 2023/01/01 15:52
- JavaScript WordPressのコンタクトフォーム7にて送信者の位置情報を送らせたい 2 2022/09/14 23:28
- HTML・CSS HTMLタグのあるCSVファイルを利用する方法 4 2023/03/19 14:41
- Excel(エクセル) PHPプログラムをエクセルに張り付けると検索ボックスがでてくる! 3 2022/05/08 07:10
- JavaScript アップロードファイルの種類によって処理を分岐させたいのですが書き方が分からずアドバイスお願いします 4 2023/06/17 19:12
- JavaScript 以前の質問だと、どの条件でも配列が表示されてしまいます。 1 2022/07/09 11:40
- JavaScript 指定時間になったら、WEBサイトの更新を自動で行うには…? 3 2022/04/28 22:14
- JavaScript clear機能を失わずにファイルアップロード機能を作成したい 3 2023/06/10 16:12
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
<a>タグのテキストを取得
-
ActiveXobjectが作成できない
-
文字を点滅させるスクリプト ...
-
画像の一部を表示
-
任意の座標をクリックさせるには
-
onclickとonkeypressの重複
-
この将棋プログラムに王様ゲッ...
-
関数でy=g(x)のgとは何の略です...
-
idを使わずにonclickで自身の要...
-
google apps scriptの終了のさせ方
-
同じIDで定義した要素の配列を...
-
javascript 変数名の連結をしたい
-
アルファベットABCD…をスマート...
-
C#テキストボックスの文字を配...
-
フォーム入力値の重複チェック
-
なぜ、ジャバスクリプトが表示...
-
現在の日付から、1ヶ月前にす...
-
ASP.NETのコントロールの値をJa...
-
Linux バイナリ実行できない "...
-
VBAでIEのボタンを押してメッセ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
<a>タグのテキストを取得
-
任意の座標をクリックさせるには
-
ActiveXobjectが作成できない
-
innerHTML実行後のイベント
-
Click回数を数え、規定された回...
-
HTML:Tableタグに対し、JavaScr...
-
JavaScriptでオブジェクトを取...
-
onchangeイベントを使ってspan...
-
【Tabキー】特定の範囲内だけで...
-
モーダルダイアログウィンドウ...
-
重複しないくじの作り方がわか...
-
javascript 特定のタグのidの存...
-
配列の大括弧と丸括弧はどう違う?
-
javascriptであるボタンを押す...
-
「nullまたはオブジェクトでは...
-
div要素内の全input要素をdisable
-
onclickを使わずにイベント処理...
-
画像上のクリックした場所が分...
-
RadioButtonListの表示制御
-
javascriptで自動計算フォーム...
おすすめ情報