ProfessinalJavaScriptDemos/Ch13/NodeInsertionEventsExample01.htm at master · wangminli/ProfessinalJavaScriptDemos · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!doctype html>
<!DOCTYPE html>
<html>
<head>
    <title>Node Insertion Events Example</title>
    <script type="text/javascript" src="EventUtil.js"></script>
</head>
<body>
    <ul id="myList">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
    <p>This example shows the use of mutation events. Not all browsers support this. Safari 3 is known to support mutation events.</p>
    <script type="text/javascript">
        EventUtil.addHandler(window, "load", function(event){
            var list = document.getElementById("myList");
            var item = document.createElement("li");
            item.appendChild(document.createTextNode("Item 4"));

            EventUtil.addHandler(document, "DOMSubtreeModified", function(event){
                alert(event.type);
                alert(event.target);
            });
            EventUtil.addHandler(document, "DOMNodeInserted", function(event){
                alert(event.type);
                alert(event.target);
                alert(event.relatedNode);
            });
            EventUtil.addHandler(item, "DOMNodeInsertedIntoDocument", function(event){
                alert(event.type);
                alert(event.target);
            });

            EventUtil.addHandler(item.firstChild, "DOMNodeInsertedIntoDocument", function(event){
                alert(event.type);
                alert(event.target);
            });

            list.appendChild(item);
        });

    </script>
</body>
</html>