jQuery on() Map

Another nice feature of jQuery on() is that it accepts an object literal for its event type. So you can use one call to on() to set multiple event listeners.

Here is the code:

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
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script>
      $(function(){
        var debug = $("#debug");
 
        $(".box").on({
          click : function(){
            debug.append("click ");
          }, 
          mouseover : function(){
            $(this).css({backgroundColor : "red"});
          }, 
          mouseout : function(){
            $(this).css({backgroundColor : "#7e9fc2"});
          }
        });
 
      });
    </script>
    <style>
      body,html{
        background-color : #333; 
        font-family : Helvetica, sans-serif;
      }
      .box{
        position: relative;
        float : left;
        width : 50px;
        height : 50px;
        margin : 2px;
        padding : 5px;
        background-color : #7e9fc2 ;
        cursor : pointer;
        font-size : 11px;
      }
      #debug{
        position : relative;
        clear : both;
        border : 1px solid gray;
        color : white;
      }
    </style>
  </head>
  <body>
    <div class="box">click me</div>
    <div class="box">click me</div>
    <div class="box">click me</div>
    <div id="debug"></div>
  </body>
</html>


 
 
 

Leave a Reply

Spam protection by WP Captcha-Free