Chinaunix首页 | 论坛 | 博客

甜心183的ChinaUnix博客

首页　| 　博文目录　| 　关于我

甜心183

  • 博客访问： 113827
  • 博文数量： 40
  • 博客积分： 0
  • 博客等级： 民兵
  • 技术积分： 423
  • 用 户 组： 普通用户
  • 注册时间： 2013-01-15 11:55
文章分类

全部博文（40）

文章存档

2016年（36）

2015年（2）

2013年（2）

我的朋友
最近访客
推荐博文
javascript keyup,focus,blur,click,mouseover,mouseout,submit实例

分类： JavaScript

2015-11-30 15:09:20

这里总结了javascript的一些常用的事件

点击(此处)折叠或打开

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Address Book</title>
  6. <style>
  7. .active { background: #ddd; }
  8. .hovering { background: #eee; }
  9. form > div { padding: 10px; }
  10. </style>
  11. </head>
  12. <body>
  13. <h1>Address Book</h1>
  14. <form action="" method="get" id="search-form">
  15. <div class="section">
  16. <label for="q">Search address book</label>
  17. <input type="search" id="q" name="q" required placeholder="type a name">
  18. </div><!--/.section-->
  19. <div class="button-group">
  20. <button type="submit" id="btn-search">search</button>
  21. <button type="button" id="get-all">get all contacts</button>
  22. </div><!--/.button-group-->
  23. </form>
  24. <div id="output"></div><!--/#output-->
  25. <!-- Keeping JS at the bottom, because we rock at performance -->
  26. </body>
  27. </html>
  28. <script>
  29.    (function(){
  30.       var contacts = {
  31.        "addressBook":[
  32.      {
  33.          "name":"helle",
  34.              "email":"jill@example.com",
  35.          },
  36.          {
  37.          "name":"helle1",
  38.              "email":"jill@example.com1",
  39.          },
  40.          {
  41.          "name":"helle2",
  42.              "email":"jill@example.com2",
  43.          },
  44.          {
  45.          "name":"helle3",
  46.              "email":"jill@example.com3",
  47.          },
  48.          {
  49.          "name":"helle4",
  50.              "email":"jill@example.com4",
  51.          }
  52.      ]
  53.    };
  54.       var searchForm = document.getElementById("search-form"),
  55.      searchField = document.getElementById("q"),
  56.          getAllButton = document.getElementById("get-all"),
  57.          count = contacts.addressBook.length,
  58.          target = document.getElementById("output");
  59.      var addr = {
  60.      search:function(event){
  61.          var searchValue = searchField.value,
  62.          i;
  63.          event.preventDefault();
  64.             target.innerHTML = "";
  65.             if(count>0&&searchValue !== ""){
  66.              for(i=0;i<count;i+=1){
  67.              var obj = contacts.addressBook[i],
  68.                  ifItFound = obj.name.indexOf(searchValue);
  69.                  if(ifItFound !== -1){
  70.                  target.innerHTML += "

    "+obj.name+''+obj.email+'

    '    ;
  71.                  }
  72.              }
  73.             }
  74.          },getAllContacts:function(){
  75.          var searchValue = searchField.value,
  76.          i;
  77.             target.innerHTML = "";
  78.             if(count>0){
  79.              for(i=0;i<count;i+=1){
  80.              var obj = contacts.addressBook[i],
  81.                  ifItFound = obj.name.indexOf(searchValue);
  82.                  if(ifItFound !== -1){
  83.                  target.innerHTML += "

    "+obj.name+''+obj.email+'

    '    ;
  84.                  }
  85.              }
  86.             }
  87.          },setActiveSection:function(){
  88.          this.parentNode.setAttribute("class","active");
  89.          },removeActiveSection:function(){
  90.          this.parentNode.removeAttribute("class");
  91.          },addHoverClass:function(){
  92.          searchForm.setAttribute("class","hovering");
  93.          },removeHoverClass:function(){
  94.          searchForm.removeAttribute("class");
  95.          }
  96.      }
  97.      searchField.addEventListener("keyup",addr.search,false);
  98.      searchField.addEventListener("focus",addr.setActiveSection,false);
  99.      searchField.addEventListener("blur",addr.removeActiveSection,false);
  100.      getAllButton.addEventListener("click",addr.getAllContacts,false);
  101.      searchForm.addEventListener("mouseover",addr.addHoverClass,false);
  102.      searchForm.addEventListener("mouseout",addr.removeHoverClass,false);
  103.      searchForm.addEventListener("submit",addr.search,false);
  104.    })();
  105.    
  106.  
  107. </script>

阅读(1061) | 评论(0) | 转发(0) |
0

上一篇：JavaScript submit实例

下一篇：prototype.js学习启程了

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6