This API has been deprecated -- please instead use the MutationObserver API!
该API已被弃用-请改用MutationObserver API ！
Mozilla Firefox 7 introduced CSS' useful text-overflow: ellipsis, an outstanding method of dynamically and elegantly concatenating strings within their parent elements. Firefox was late to the text-overflow party, so the Dojo Toolkit offered dojox.ellipsis, a resource that would shim ellipsis functionality with an iFrame. When perusing the dojox.ellipsis code, I found that the creators used the DOMSubtreeModified event to recheck all nodes when the page structure changes. After a bit of research, I found a whole host of DOM events you can use to spy on the document.
Mozilla Firefox 7引入了CSS有用的text-overflow: ellipsis ，这是一种在其父元素内动态优雅地连接字符串的出色方法。 Firefox迟到了text-overflow大会，因此Dojo Toolkit提供了dojox.ellipsis ，该资源可以使用iFrame来实现省略号功能。 当仔细dojox.ellipsis代码时，我发现创建者使用DOMSubtreeModified事件在页面结构更改时重新检查所有节点。 经过一番研究，我发现了很多可以用来监视文档的DOM事件。
Here are the DOM tree events you can listen for:
这是您可以听的DOM树事件：
Event nameSpecDescriptionDOMActivateW3C DraftA user agent must dispatch this event when a button, link, or other state-changing element is activated. Refer to Activation triggers and behavior for more details. (Deprecated in favor of click)DOMAttrModifiedW3C DraftA user agent must dispatch this event after an Attr.value has been modified and after an Attr node has been added to or removed from an Element.DOMAttributeNameChangedW3C DraftA user agent must dispatch this event after the namespaceURI and/or the nodeName of a Attr node have been modified (e.g., the attribute was renamed using Document.renameNode()).DOMCharacterDataModifiedW3C DraftA user agent must dispatch this event after CharacterData.data or ProcessingInstruction.data have been modified, but the node itself has not been inserted or deleted.DOMContentLoadedHTML5DOMElementNameChangedW3C DraftA user agent must dispatch this event after the namespaceURI and/or the nodeName of an Element node have been modified (e.g., the element was renamed using Document.renameNode()).DOMFocusInW3C DraftA user agent must dispatch this event when an event target receives focus. The focus must be given to the element before the dispatch of this event type. This event type must be dispatched after the event type focus.DOMFocusOutW3C DraftA user agent must dispatch this event when an event target loses focus. The focus must be taken from the element before the dispatch of this event type. This event type must be dispatched after the event type blur.DOMNodeInsertedW3C DraftA user agent must dispatch this event type when a node other than an Attr node has been added as a child of another node. A user agent may dispatch this event when an Attr node has been added to an Element node (see note below). This event must be dispatched after the insertion has taken place.DOMNodeInsertedIntoDocumentW3C DraftA user agent must dispatch this event when a node has been inserted into a document, either through direct insertion of the node or insertion of a subtree in which it is contained; a user agent may optionally treat an Attr node as part of an Element's subtree. This event must be dispatched after the insertion has taken place.DOMNodeRemovedW3C DraftA user agent must dispatch this event when a node other than an Attr node is being removed from its parent node. A user agent may dispatch this event when an Attr node is being removed from its ownerElement (see note below). This event must be dispatched before the removal takes place.DOMNodeRemovedFromDocumentW3C DraftA user agent must dispatch this event when a node is being removed from a document, either through direct removal of the node or removal of a subtree in which it is contained; a user agent may optionally treat an Attr node as part of an Element's subtree. This event must be dispatched before the removal takes place.DOMSubtreeModifiedW3C DraftThis is a general event for notification of all changes to the document. It can be used instead of the more specific mutation and mutation name events. It may be dispatched after a single modification to the document or, at the implementation's discretion, after multiple changes have occurred. The latter case should generally be used to accommodate multiple changes which occur either simultaneously or in rapid succession. The target of this event must be the lowest common parent of the changes which have taken place. This event must be dispatched after any other events caused by the mutation(s) have occurred. 活动名称 规格 描述 DOMActivate W3C草案 当激活按钮，链接或其他状态更改元素时，用户代理必须调度此事件。 有关更多详细信息，请参阅激活触发器和行为。 (不推荐使用click ) DOMAttrModified W3C草案 在修改了Attr.value并将Attr节点添加到元素或从Element中删除之后，用户代理必须调度此事件。 DOMAttributeNameChanged W3C草案 在修改了namespaceURI和/或Attr节点的nodeName(例如，使用Document.renameNode()重命名了属性)之后，用户代理必须调度此事件。 DOMCharacterDataModified W3C草案 在修改了CharacterData.data或ProcessingInstruction.data之后，用户代理必须调度此事件，但是尚未插入或删除节点本身。 DOMContentLoaded HTML5 DOMElementNameChanged W3C草案 在修改了namespaceURI和/或Element节点的nodeName(例如，使用Document.renameNode()重命名了元素)之后，用户代理必须调度此事件。 DOMFocusIn W3C草案 当事件目标获得焦点时，用户代理必须调度此事件。 在分派此事件类型之前，必须将焦点给予该元素。 必须在事件类型焦点之后分派此事件类型。 DOMFocusOut W3C草案 当事件目标失去焦点时，用户代理必须调度此事件。 必须在分派此事件类型之前从元素获取焦点。 必须在事件类型模糊之后分派此事件类型。 DOMNodeInserted W3C草案 当添加了Attr节点以外的节点作为另一个节点的子节点时，用户代理必须调度此事件类型。 当将Attr节点添加到Element节点时，用户代理可以调度此事件(请参见下面的注释)。 插入发生后必须调度此事件。 DOMNodeInsertedIntoDocument W3C草案 当将节点插入文档时，用户代理必须通过直接插入节点或插入包含该节点的子树来调度此事件。 用户代理可以选择将Attr节点视为元素子树的一部分。 插入发生后必须调度此事件。 DOMNodeRemoved W3C草案 当从其父节点中删除Attr节点以外的节点时，用户代理必须调度此事件。 当从其ownerElement中删除Attr节点时，用户代理可以调度此事件(请参见下面的注释)。 必须在删除发生之前分派此事件。 DOMNodeRemovedFromDocument W3C草案 当从文档中删除节点时，用户代理必须通过直接删除节点或删除包含该节点的子树来调度此事件。 用户代理可以选择将Attr节点视为元素子树的一部分。 必须在删除发生之前分派此事件。 DOMSubtreeModified W3C草案 这是通知文档所有更改的常规事件。 可以使用它代替更具体的突变和突变名称事件。 可以在单次修改文档后或在实现多次更改后，根据实现情况的判断，将其分派。 通常应使用后一种情况来容纳同时或快速连续发生的多个变化。 此事件的目标必须是已发生的更改的最低公共父级。 在由突变引起的任何其他事件发生之后，必须调度此事件。Table provided by MDN documentation.
MDN文档提供的表。
The DOM event you'll probably recognize is DOMContentLoaded, which is used to signal the domready we're all used to seeing within our JavaScript toolkits. The event names are all fairly self-explanatory. Adding these events is as easy as adding any other type of event:
您可能会认识到的DOM事件是DOMContentLoaded，该事件用于表示我们都习惯在JavaScript工具包中看到的domready。 事件名称都是不言自明的。 添加这些事件与添加任何其他类型的事件一样容易：
// Notify us when any node within the document is modified, added removed, etc. document.addEventListener("DOMSubtreeModified", function(e) { // Notify of change! console.warn("change!", e); }, false); // Now create a new element to see what it will look like var a = document.createElement("a"); document.body.appendChild(a); /* Result: { ADDITION: 2, MODIFICATION: 1, REMOVAL: 3, attrChange: 0, attrName: "", defaultPrevented: false, newValue: "", prevValue: "", relatedNode: null, initMutationEvent: initMutationEvent(), bubbles: true, cancelable: false, constructor: MutationEvent { MODIFICATION=1, ADDITION=2, REMOVAL=3}, currentTarget: Document en, eventPhase: 3, explicitOriginalTarget: body.home, isTrusted: true, originalTarget: body.home, target: body.home, timeStamp: 0, type: "DOMSubtreeModified" } */What if you want to listen to simple node changes?
如果您想听简单的节点更改怎么办？
// Listen to when an image src or alt gets changed (ex: slideshow, etc.) document.getElementById("slideshowImage").addEventListener("DOMAttrModified", function(e) { // Record the occurrence console.warn(e.attrName + " changed from ", e.prevValue," to: ", e.newValue); }, false);The attrName, prevValue, and newValue values tell you which attribute changed and its previoius and current values. Each event type has its own custom event properties so experiment with events when creating them. You can also learn the event properties by checking out the spec list.
attrName ， prevValue和newValue值告诉您更改了哪个属性以及其previoius和当前值。 每种事件类型都有其自己的自定义事件属性，因此在创建事件时请对其进行试验。 您还可以通过检出规格列表来了解事件属性。
These DOM events are really nice to plug into if you're looking for complete control over Document. The one caution to throw to you is that since these events can fire so often, attaching to them can be heavy on your app. The ability to attach to them when needed is incredibly useful in a sophisticated web application.
如果您正在寻找对Document的完全控制，那么将这些DOM事件插入非常好。 提醒您的是，由于这些事件可能会频繁发生，因此附加到它们上可能会给您的应用造成沉重负担。 在需要时附加到它们的功能在复杂的Web应用程序中非常有用。
翻译自: https://davidwalsh.name/dom-events-javascript
相关资源：jdk-8u281-windows-x64.exe