In front of the word

change (mutation) Events can be DOM Prompt when a part of is changed , This kind of event is very useful , But they can only use DOM2 Level event handler , And because the browser compatibility is not good , So it's not widely used

Delete node

When deleting a node , involves DOMNodeRemoved、DOMNodeRemovedFromDocument and DOMSubtreeModified These three events , More on this below

DOMNodeRemoved

In the use of removeChild() or replacechild() from DOM When a node is deleted in , Will trigger DOMNodeRemoved event . and event.relatedNode Attribute contains a reference to the parent node of the target node . When this event triggers , Node has not been removed from its parent , Therefore, its parentNode Property still points to the parent node . The event will bubble

[ Be careful ]IE8- Browser does not support

<div id="box" style="height: 30px;width: 100px;">
<div id="inBox">1</div>
</div>
<button id="btn"> Delete child nodes </button>
<script>
inBox.addEventListener('DOMNodeRemoved',function(e){
e = e || event;
e.relatedNode.style.background = 'lightblue';
});
btn.onclick = function(){
box.removeChild(inBox);
}
</script>

DOMNodeRemovedFromDocument

If the removed node contains child nodes , Then it will trigger one after another on all its child nodes and the removed node DOMNodeRemovedFromDocument event , This incident will not bubble , The goal is target Point to the removed node

[ Be careful ] The only thing that happened was chrome/safari/opera Browser support

<div id="box" style="height: 30px;width: 100px;">
<div id="inBox">1</div>
</div>
<button id="btn"> Delete child nodes </button>
<script>
inBox.addEventListener('DOMNodeRemovedFromDocument',function(e){
e = e || event;
console.log(e.target.innerHTML)//1
});
btn.onclick = function(){
box.removeChild(inBox);
}
</script>

DOMSubtreeModified

stay DOM Any change in the structure triggers DOMSubtreeModified event , This event is triggered after any other event is triggered

The target of this event is the parent of the removed node

[ Be careful ]IE8- Browser does not support

<div id="box" style="height: 30px;width: 100px;">
<div id="inBox">1</div>
</div>
<button id="btn"> Delete child nodes </button>
<script>
box.addEventListener('DOMSubtreeModified',function(e){
e = e || event;
console.log(e.type)//DOMSubtreeModified
});
btn.onclick = function(){
box.removeChild(inBox);
}
</script>

The order

When deleting a node , The sequence of events triggered is DOMNodeRemoved event 、DOMNodeRemovedFromDocument Events and DOMSubtreeModified event

<div id="box" style="height: 30px;width: 100px;">
<div id="inBox">1</div>
</div>
<div id="result"></div>
<button id="btn"> Delete child nodes </button>
<script>
inBox.addEventListener('DOMNodeRemoved',handler);
box.addEventListener('DOMSubtreeModified',handler);
inBox.addEventListener('DOMNodeRemovedFromDocument',handler);
function handler(e){
e = e || event;
result.innerHTML += e.type + ';';
}
btn.onclick = function(){
box.removeChild(inBox);
}
</script>

Insert node

When inserting a node, it involves DOMNodeInserted event 、DOMNodeInsertedIntoDocument Events and DOMSubtreeModified event , More on this below

DOMNodeInserted

In the use of appendChild()、replaceChild() or insertBefore() towards DOM When inserting nodes in , First trigger DOMNodeInserted event

The target of this event is the inserted node , and event.relatedNode Property contains a reference to the parent node

When this event triggers , The node has been inserted into the new parent node . This incident is bubbling , So you can DOM And deal with it at all levels

[ Be careful ]IE8- Browser does not support

<div id="box" style="height: 30px;width: 100px;">
</div>
<button id="btn"> Insert node </button>
<script>
box.addEventListener('DOMNodeInserted',function(e){
e = e || event;
e.relatedNode.style.background = 'lightblue';
});
btn.onclick = function(){
document.body.appendChild(box);
}
</script>

DOMNodeInsertedIntoDocument

On the newly inserted node, it will trigger DOMNodeInsertedIntoDocument event . This incident is not bubbling , So you have to add this event handler to the node before you insert it . The target of this event is the inserted node

[ Be careful ] The only thing that happened was chrome/safari/opera Browser support

<div id="box" style="height: 30px;width: 100px;">
</div>
<button id="btn"> Insert node </button>
<script>
box.addEventListener('DOMNodeInsertedIntoDocument',function(e){
e = e || event;
box.style.background = 'lightblue';
});
btn.onclick = function(){
document.body.appendChild(box);
}
</script>

The order

When inserting a node , The sequence of events triggered is DOMNodeInserted event 、DOMNodeInsertedIntoDocument Events and DOMSubtreeModified event

<div id="box" style="height: 30px;width: 100px;">
</div>
<div id="outer"></div>
<div id="result"></div>
<button id="btn"> Insert child node </button>
<script>
box.addEventListener('DOMNodeInserted',handler);
outer.addEventListener('DOMSubtreeModified',handler);
box.addEventListener('DOMNodeInsertedIntoDocument',handler);
function handler(e){
e = e || event;
result.innerHTML += e.type + ';';
}
btn.onclick = function(){
outer.appendChild(box);
}
</script>

Characteristics of the node

DOMAttrmodified

When the feature is modified ,DOMAttrmodified Event is triggered

[ Be careful ] The only thing that happened was firefox and IE8+ Browser support

<div id="box" title="123" style="height: 30px;width: 100px;"></div>
<button id="btn"> Modify features </button>
<script>
box.addEventListener('DOMAttrModified',handler);
function handler(e){
e = e || event;
box.innerHTML = e.type;
}
btn.onclick = function(){
box.setAttribute('title','abc');
}
</script>

Text node

DOMCharacterDataModified

When the value of a text node changes , Trigger DOMCharacterDataModified event

[ Be careful ] The only way to do this is chrome/safari/opera Browser support

<div id="box" style="height: 30px;width: 100px;">abc</div>
<button id="btn"> Modify the text </button>
<script>
box.addEventListener('DOMCharacterDataModified',handler);
function handler(e){
e = e || event;
console.log(e)
box.style.background = 'pink';
}
btn.onclick = function(){
box.innerHTML = '123';
}
</script>

Last

above 7 A change event , Browser compatibility is not very good . The only way to get by is DOMNodeInserted、DOMNodeRemoved and DOMSubtreeModified These three events , Are not compatible IE8- browser

In depth understanding of DOM Event type series 3 —— More articles on Change Events

  1. In depth understanding of DOM Event type series 5 —— The text event

    × Catalog [1]change [2]textInput [3]input[4]propertychange[5] compatible In front of the word If DOM Changes in structure , The trigger is a change event : If the text in the text box changes , touch ...

  2. In depth understanding of DOM Part 4 of the event type series —— Clipboard Events

    × Catalog [1] Definition [2] Object methods [3] application In front of the word The operation on the clipboard may not look impressive , But it's very useful , Can enhance the user experience , Convenient for users to operate . This article details clipboard Events Definition Clipboard operations include cutting (cut). complex ...

  3. In depth understanding of DOM The third in the event mechanism series —— Event object

    × Catalog [1] obtain [2] Event type [3] The objective of the event [4] Event agent [5] Event Bubbling [6] Flow of events [7] Default behavior In front of the word It's triggering DOM When you have an event on , An event object is generated event, This object contains everything and things ...

  4. In depth understanding of DOM Event type series Chapter 6 —— Loading event

    In front of the word When it comes to loading events , Maybe I thought of window.onload, But actually , Load events are a large class of events , This article details loading events load load Event is one of the most common events , When the page is fully loaded ( Including all the images .java ...

  5. WWF3 Event type activity &lt; Third articles &gt;

    WWF Divide workflows into two categories : oriented Human: When the workflow is running, the business flow of the workflow is affected by the user's operation on the external application . oriented System: Application control process . Workflow and application can exist independently , So between them ...

  6. In depth understanding of javascript The third in the series of advanced functions —— Function throttling and function buffeting

    In front of the word javascript Most of the functions in are triggered by the user's active call , Unless the implementation of the function itself is unreasonable , Otherwise, you will not encounter performance related problems . But in a few cases , The trigger of a function is not directly controlled by the user . In these scenes ...

  7. In depth understanding of javascript Selectors API Part three of the series ——h5 Newly added 3 Kind of selector Method

    × Catalog [1] Method [2] Not in real time [3] defects In front of the word Even though DOM As API It's perfect , But in order to do more ,DOM Still expanding , One of the important extensions is the selector API An extension of . People are right. jQuer ...

  8. In depth understanding of javascript Selectors API Part three of the series ——HTML5 Newly added 3 Kind of selector Method

    In front of the word Even though DOM As API It's perfect , But in order to do more ,DOM Still expanding , One of the important extensions is the selector API An extension of . People are right. jQuery praise , A lot of it is due to jQuery Convenient element selector ...

  9. Deep understanding of scripting CSS Part three of the series —— scripting CSS class

    In front of the word In practice , We use javascript operation CSS style , If you want to change a lot of styles , Will use scripting CSS Class , In this article, I'll describe scripting in detail CSS class style When we change the style of a few elements , It's usually direct ...

Random recommendation

  1. super The role of ( Transferred from Baidu )

    super Occurs in subclasses that inherit the parent class . There are three ways of being : The first one is super.xxx;(xxx Name of variable or object ) The significance of this method is , Get the name in the parent class as xxx Variable or method reference for . Using this method, you can directly access variables or ...

  2. python Data storage and persistence operations

    Python There are six main types of data persistence operations : Ordinary documents .DBM file .Pickled Object storage .shelve Object storage . Object database storage . Relational databases store . Ordinary documents don't explain ,DBM It is to store the key value pairs of strings in a file : ...

  3. Code::Blocks Project configuration basis

    File  menu New : newly build ( Empty file/file . class . project . build target ) . Recent projects/files : Recently opened projects ...

  4. SOM Clustering and Voroni The application of graph in captcha character segmentation

    http://www.docin.com/p-1300981517.html SOM Clustering and Voroni The application of graph in captcha character segmentation  

  5. 201521123028《Java Programming 》 The first 1 Weekly learning summary

    1. This week's learning summary Through this week's study : 1. I understand Java History of development ( from OAK to turn to Internet, And gradually develop the course so far ) 2. And C Language is ,Java Characteristics of language : ① Compile the source program into a structure neutral intermediate file lattice ...

  6. use vue To develop a app(2,main.js)

    I followed you yesterday vue The official website of vue One of the scaffolds , I used it for the first time VUE It's all in the groping stage . Today, try to see what's inside the scaffold Have a look first main.js Imported 3 A module One vue, One app, also rout ...

  7. git revoke add and commit

    Sometimes after changing the code, you find that you have changed the wrong branch , And this time it's already add perhaps commit 了 , What do I do , Is there a way to : 1. If you have add .   You can use it at this time git stash command , The specific operation command is as follows : (1) > git ...

  8. 20145317 Peng Yao 《 Cyber warfare 》Exp6 Information gathering and vulnerability scanning

    20145317 Peng Yao < Cyber warfare >Exp6 Information gathering and vulnerability scanning I want to answer 1. Which organizations are responsible for DNS,IP Management of ? DNS Domain name server : Most of them are in Europe and North America , China has only mirror servers . There are... All over the world 5 ...

  9. crunch Dictionary generation

    There are basically three ways to crack passwords : The first is artificial guessing ( Trash can engineering and passive information collection ): The second is dictionary based brute force cracking ( Main stream ) stay kali in , It's a dictionary by default , In the following three files :/usr/share/wordlis ...

  10. 【Linux】- Yes find,xargs,grep And some understanding of the pipeline

    problem I believe we all know the command to search for files containing fixed strings in the directory : find . -name '*.py' |xargs grep test At the beginning , I am not familiar with it xargs command , So the direct command is : fi ...