js0002

发表于 | 阅读次数:
字数统计: 148 | 阅读时长 ≈ 1 
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>
<html>
  <head>
    <title>A small web application with a GUI reacting to events</title>
    <style>
      #first { color: green;}
      #second { color: red;}
    </style>
  </head>
  <body>
    <ul id="first"></ul>

    <script>
      function addMessage(element, message){			          //#A
        var messageElement = document.createElement("li");	//#A
        messageElement.textContent = message;			          //#A
        element.appendChild(messageElement);			          //#A
      }								                                      //#A

      var first = document.getElementById("first");
      addMessage(first, "Page loading");
    </script>

    <ul id="second"></ul>

    <script>
      document.body.addEventListener("mousemove", function() {	//#B
        var second = document.getElementById("second");
        addMessage(second, "Event: mousemove");
      });

      document.body.addEventListener("click", function(){		   //#C
        var second = document.getElementById("second");
        addMessage(second, "Event: click");
      });
    </script>
  </body>
</html>