JavaScript event (eight) event type Change Event

Source: Internet
Author: User

The DOM2-level change (mutation) event gives a hint when a change is sent to a part of the DOM. A Change event is designed for XML or HTML DOM and is not specific to a language. The DOM2 level defines the following change events.

    • Domsubtreemodifined: When there is any change in the DOM structure. This event is triggered after other events have been triggered.
    • Domnodeinserted: Triggered when a node is inserted into another node as a child node.
    • Domnoderemoved: Triggered when a node is removed from its parent node.
    • Domnodeinsertedintodocument: Triggered when a node is inserted directly into a document or indirectly through a subtree. This event is triggered after domnodeinserted.
    • Domnoderemovedfromdocument: Triggered before a node is removed directly from the document or indirectly from the document via a subtree. This event is triggered after domnoderemoved.
    • Domattrmodified: Triggered after the feature has been modified.
    • Domcharacterdatamodified: Triggered when the value of a text node changes.

Use the dots below to detect if the browser supports a change event:

var issupported=document.implementation.hasfeature ("mutationevents", "2.0");

IE8 and earlier versions do not support any change events, and other browser support is also different:

DOM3 abandoned a lot of change events. Here are some events that are still supported.

1. Deleting nodes

The domnoderemoved event is triggered first when a node is removed from the DOM using REMOVECHLD () or Replacedchild (). The target of this event (Event.target) is the node being deleted, and the Event.replatednode property contains a reference to the parent node of the target node.

    • When this event is triggered, the node has not been removed from its parent node, so its ParentNode property still points to the parent node (same as Event.relatednode). This event bubbles, so it can be handled at any level of the DOM.
    • If the removed node contains child nodes, the domnoderemovedfromdocument event is triggered successively on all its child nodes, and on the removed node. However, this event does not bubble , so only event handlers that are directly assigned to one of the child nodes are called. The object of this event is the corresponding child node or the node that is removed, except for other information that is not included in the events object.
    • The domsubtreemodified event is triggered immediately after. The goal of this event is to remove the parent node of the node, and the event object will not provide additional information related to the incident.

Example:

<Body><ulID= "MyList">    <Li>Item 1</Li>    <Li>Item 2</Li>    <Li>Item 3</Li></ul></Body>

To remove the <ul> element, the following event is triggered in turn.

    1. Triggering the domnoderemoved event on the <ul> element, Event.replatednode to Document.body
    2. Triggers the domnoderemovedfromdocument event on the <ul> element.
    3. The domnoderemovedfromdocument event is triggered on each <li> element and text node of the <ul> element child node.
    4. Triggers the domsubtreemodified event on Document.body. Because <ul> is a direct sub-element of Document.body.
<Scripttype= "Text/javascript">eventutil.addhandler (window,"Load",function(event) {varList=document.getElementById ("myList"); Eventutil.addhandler (document,"domsubtreemodified",function(event) {Console.log (event.type);    Console.log (Event.target);    }); Eventutil.addhandler (document,"domnoderemoved",function(event) {Console.log (event.type);        Console.log (Event.target);    Console.log (Event.relatednode); });
//does not bubble, so the first child node added to UL (in a DOM-compatible browser is a text node) Eventutil.addhandler (List.firstchild,"domnoderemovedfromdocument",function(event) {Console.log (event.type); Console.log (Event.target); });});</Script>

Remove <ul> result from the document as follows:

2. Inserting nodes

The domnodeinserted event is triggered first when a node is inserted into the DOM using AppendChild (), ReplaceChild (), or insertbefore (). The target of this event is the node being inserted, and the Event.relatednode property contains a reference to the parent node.

    • When this event is triggered, the node has been inserted into the new parent node. This event bubbles, so it can be handled at any level of the DOM.
    • The triggering domnodeinsertedintodocument event is triggered immediately above the newly inserted node. This event does not bubble, so you must not add this event handler before inserting the node. The target of this event is the node being inserted, except for other information in the event object.
    • The last event triggered is the domsubtreemodified event, which is triggered on the parent node of the newly inserted node.

Or the above example:

Eventutil.addhandler (window, "load",function(event) {varList=document.getelementbyid ("MyList"); varItem=document.createelement ("Li"); Item.appendchild (document.createTextNode ("Item 4")); Eventutil.addhandler (document,"Domsubtreemodified",function(event) {Console.log (event.type);    Console.log (Event.target);    }); Eventutil.addhandler (document,"Domnodeinserted",function(event) {Console.log (event.type);        Console.log (Event.target);    Console.log (Event.relatednode);    }); Eventutil.addhandler (List.firstchild,"Domnodeinsertedintodocument",function(event) {//Do not bubble console.log (Event.type);    Console.log (Event.target);    }); List.appendchild (item);});

Execution Result:

The domnodeinserted event is triggered first on the new <li> element item, and its relatednode is the <>ul element.

The domnodeinsertedintodocument event on the new <li> element is then triggered, and the domsubtreemodified event on the <ul> element is finally triggered.


Extended reading:

JavaScript event (one) event flow

JavaScript event (ii) event handlers

JavaScript event (iii) Event object

JavaScript events (iv) Public members of event (properties and methods)

JavaScript event (v) Event type mouse event

JavaScript event (vi) Event Type wheel Event

JavaScript event (vii) Event type keyboard and text events

The author starof, because the knowledge itself in the change, the author is also constantly learning and growth, the content of the article is not updated regularly, in order to avoid misleading readers, convenient tracing, please reprint annotated source: http://www.cnblogs.com/starof/p/6559742. HTML has a problem welcome to discuss with me, common progress.

JavaScript event (eight) event type Change Event

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.