DOMAttrModifiedや、DOMNodeInsertedをGreasemonkeyスクリプト内で使用していたのだが、これらのMutation eventsが非推奨となってしまったらしい。じゃあ何を使ったらいいの？ということで、Mutation ObserversというAPIが提供されているらしい。 Mutation Observersの利用方法をまとめてみた。
ちょっと読んでみよう
使う前に、どうやって使うかなど、ちょっと頭に入れておこう。Mozillaのページにまとめて書いてあるので、そちらを見れば大丈夫かと。
MutationObserver - Web API リファレンス | MDN
https://developer.mozilla.org/ja/docs/Web/API/MutationObserver
MutationObserverにメソッドを与えてインスタンスを作成。インスタンスメソッドのobserve実行時のオプションで、監視する種類などを設定すると。フムフム。
MutationObserverはこう使う
コードを見た方が速いので、まずは使い方から。たとえば、
DOMAttrModifiedをMutationObserverに置き換えるとこんな感じ。
$('#hoge').bind('DOMAttrModified',function(event){
console.dir(event);
});
var mo = new MutationObserver(function(mutationRecords){
console.dir(mutationRecords);
});
mo.observe($('#hoge').get(0), {attributes: true});
変更前の値も欲しいならこう
var mo = new MutationObserver(function(mutationRecords){
console.dir(mutationRecords);
});
mo.observe($('#hoge').get(0), {attributes: true, attributeOldValue: true});
Mutation eventsからMutationObserverへ移行しよう
こんな感じかな。
| Mutation events | Mutation Observers |
|---|---|
| DOMAttrModified | observe( Node target, {attributes: true, attributeOldValue: true} ); |
| DOMNodeInserted | observe( Node target, {childList: true} ); |
| DOMNodeRemoved | observe( Node target, {childList: true} ); |
| DOMCharacterDataModified | observe( Node target, {characterData: true, characterDataOldValue: true} ); |
| DOMSubtreeModified | observe( Node target, {subtree: true} ); |
IEは消費電力で勝負ですもんね。
よいこのみんな！夏は消費電力を抑えるためにIEを使おうね (オイ)
Internet Explorer 10の消費電力はChromeやFirefoxより18%低い, とMicrosoftは主張 | TechCrunch Japan
http://jp.techcrunch.com/2013/06/06/20130605microsoft-internet-explorer-10-is-the-most-energy-efficient-browser-uses-up-to-18-less-power-than-chrome-and-firefox/
