[Javascript]DOMの変更を捕捉して処理をする

Google ChartのTableを使っていて、このイベント取りたいのに、mouseoverとかfocusとか、ないんですか!という状況になった。jQuery環境。

マウスオーバーのイベントをなんとか捕捉する為、テーブル行へのスタイルの追加の段階でDOMの変更を監視してなんとかしました。当然ですが、かなりゴリ押しな方法なのでアップデートなどで正常に動作しなくなる可能性があります。(allowHTML:trueとするとHTMLのTableで出力されるので少し楽だった)

MutationObserverを扱う日本語の情報が少なすぎてつらかった。誰かの記事に書いてありましたが、確かにここのリンクで事足りるのかもしれませんがサンプルコードはちょっと欲しかった。

ブラウザの機能の変化は早くて嫌になりますね。

window.addEventListener(‘DOMAttrModified’,function(){})系の非推奨のサンプルコードは既に動きませんでした。(書き方が悪かっただけかもしれませんが、推奨する書き方で動いたのでそちらを使用)

GoogleChartで円グラフとテーブルを横に並べて同じデータを表示している状態。行番号を表示しておいて、それを配列のインデックスに流用しているので、それが嫌な方は何らかの(children取得して上から順に数えるとか)処理に変えてください。Tableをソートする場合のコードは後ろに分けてあります。

とりあえず書いたコードはこんな感じ。ソート時にはtable作り直すのかな?テーブルをここに入れろ、とIDと指定するdivの場所で変更を拾ってると再適用できました。

jQuery書いた経験少ないので、何か変なコード見たら突込みください。

まともに誇れるような技術を何一つここに書いてないような気がするのは気のせいだろうか…。トリッキーというかその場しのぎな事ばかり投稿しているような…。

カテゴリー: Javascript, プログラミング関連 パーマリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です