learn_js/jquery_bind.html at master · shnooga/learn_js · 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
<HTML>
  <HEAD>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <script type="text/JavaScript" src="jquery-1.8.3.js"> </script>
    <script type="text/JavaScript">
      $( function() {
          $("#myButton").bind("click", function(event) {
            log("Click Event");
            });
          $("input").bind("mouseover", function(event) {
            log("MouseOver Event");
            });
      });

      function log(msg) {
        $("#console").append("<div>" + new Date() + " : " + msg + " </div>");
      }
    </script>
    <STYLE>
      .code {
        color: green;
      }
      .console {
        background-color: black;
        color: yellow;
      }
    </STYLE>
  </HEAD>
  <H1> JQuery Bind Events </H1>
  <BODY>
    <DIV class='code'>
          $("#myButton").bind("click", function(event) {
            log("Click Event");
            });<br>
          $("input").bind("mouseover", function(event) {
            log("MouseOver Event");
            });<br><br>
      <input id="myButton" type="button" value="my button"/>
    </DIV>
    <br><br>
    <DIV id="console" class="console">
    </DIV>
  </BODY>
</HTML>