ProfessinalJavaScriptDemos/Ch13/NodeRemovalEventsExample01.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
<!doctype html>
<!DOCTYPE html>
<html>
<head>
    <title>Node Removal 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");

            EventUtil.addHandler(document, "DOMSubtreeModified", function(event){
                alert(event.type);
                alert(event.target);
            });
            EventUtil.addHandler(document, "DOMNodeRemoved", function(event){
                alert(event.type);
                alert(event.target);
                alert(event.relatedNode);
            });
            EventUtil.addHandler(list.firstChild, "DOMNodeRemovedFromDocument", function(event){
                alert(event.type);
                alert(event.target);
            });

            list.parentNode.removeChild(list);
        });

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