このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。
MutationEvent
非推奨;: この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。
MutationEvent インターフェイスは、 Document Object Model (DOM) の階層とノードの変更に特化したイベントプロパティを提供します。
メモ: mutation イベントを使用するのは問題があります。
- 設計上の欠陥があります。
- 文書に DOM の mutation リスナーを追加すると、その文書に対するその後の DOM 変更のパフォーマンスが著しく低下します(1.5 倍から 7 倍も遅くなります)。さらに、リスナーを削除してもダメージは元に戻りません。
- クロスブラウザー互換性が低いです。 Safari は
DOMAttrModifiedに対応しておらず(WebKit のバグ 8191 を参照)、Firefox は mutation name イベント(DOMElementNameChangedやDOMAttributeNameChangedなど)に対応していません。
これらは非推奨になり、変異オブザーバーに置き換えられました。こちらの使用を検討してください。
インスタンスプロパティ
このインターフェイスには親である UIEvent と、間接的に Event から継承したプロパティがあります。
MutationEvent.attrChange読取専用 非推奨;-
どのような変更が
DOMAttrModifiedイベントのトリガーとなったかを示します。これはMODIFICATION(1)、ADDITION(2)、REMOVAL(3)のいずれかです。他のイベントに対しては意味を持たず、0に設定されます。 MutationEvent.attrName読取専用 非推奨;-
DOMAttrModifiedイベントの影響を受けるノードの名前を示します。他のイベントでは意味を持たず、空文字列 ("") に設定されます。 MutationEvent.newValue読取専用 非推奨;-
DOMAttrModifiedイベントでは、変更されたAttrノードの新しい値が格納されます。DOMCharacterDataModifiedイベントでは、変更されたCharacterDataノードの新しい値を返します。それ以外の場合は、空文字列 ("") を返します。 MutationEvent.prevValue読取専用 非推奨;-
DOMAttrModifiedイベントでは、変更前のAttrノードの値が格納されます。DOMCharacterDataModifiedイベントでは、変更されたCharacterDataノードの新しい値を返します。それ以外の場合は、空文字列 ("") を返します。 -
DOMSubtreeModifiedのサブツリー内の変更されたノードのように、イベントに関連するノードを示します。
インスタンスメソッド
MutationEvent.initMutationEvent()非推奨;-
コンストラクターメソッドで、与えられた引数で構成された新しい
MutationEventを返します。
変異イベント一覧
以下はすべての変異イベントの一覧です。
DOMAttrModified(Safari では未対応)DOMAttributeNameChanged(Firefox では未対応)DOMCharacterDataModifiedDOMElementNameChanged(Firefox では未対応)DOMNodeInsertedDOMNodeInsertedIntoDocumentDOMNodeRemovedDOMNodeRemovedFromDocumentDOMSubtreeModified
例
変異イベントのリスナーは、 EventTarget.addEventListener() を使って以下のように登録できます。
element.addEventListener(
"DOMNodeInserted",
(event) => {
// ...
},
false,
);
仕様書
This feature does not appear to be defined in any specification.ブラウザーの互換性
Loading...