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 では未対応)DOMCharacterDataModified
DOMElementNameChanged
(Firefox では未対応)DOMNodeInserted
DOMNodeInsertedIntoDocument
DOMNodeRemoved
DOMNodeRemovedFromDocument
DOMSubtreeModified
例
変異イベントのリスナーは、 EventTarget.addEventListener()
を使って以下のように登録できます。
element.addEventListener(
"DOMNodeInserted",
(event) => {
// …
},
false,
);
仕様書
Specification |
---|
UI Events # interface-mutationevent |
ブラウザーの互換性
BCD tables only load in the browser