onclick        当用户点击某个对象时调用的事件句柄。
ondblclick     当用户双击某个对象时调用的事件句柄。
onfocus        元素获得焦点。               // 练习：输入框
onblur         元素失去焦点。               应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange       域的内容被改变。             应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）
onkeydown      某个键盘按键被按下。          应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress     某个键盘按键被按下并松开。
onkeyup        某个键盘按键被松开。
onload         一张页面或一幅图像完成加载。
onmousedown    鼠标按钮被按下。
onmousemove    鼠标被移动。
onmouseout     鼠标从某元素移开。
onmouseover    鼠标移到某元素之上。
onselect      在文本框中的文本被选中时发生。
onsubmit      确认按钮被点击，使用的对象是form。
 
 
 
 
 
结合计时器的事件示例，input框里面动态显示时间:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="x-ua-compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1">
  7.   <title>定时器</title>
  8.   <script>  //当js代码中有找标签的操作的时候，别忘了页面加载的时候的顺序，以防出现找不到标签的情况出现，我们可以将这个script标签放到body标签最下面，或者用window.onload，这里我没有放，你们练习的时候放到下面去
  9.     var intervalId; //用来保存定时器对象，因为开始定时器是一个函数，结束定时器是一个函数，两个函数都是操作的一个定时器，让他们互相能够操作这个定时器，就需要一个全局变量来接受一下这个对象
  10. 　　
    　　
    　　//把当前事件放到id为i1的input标签里面
  11.     function f() {
  12.       var timeStr = (new Date()).toLocaleString(); // 1.拿到当前事件
  13.       var inputEle = document.getElementById("i1");// 2.获取input标签对象
  14.       inputEle.value = timeStr;  //3.将事件赋值给input标签的value属性
  15.     }
  16. 　　//开始定时任务
  17.     function start() {
  18.       f();
  19.       if (intervalId === undefined) { //如果不加这个判断条件，你每次点击开始按钮，就创建一个定时器，每点一次就创建一个定时器，点的次数多了就会在页面上生成好多个定时器，并且点击停止按钮的时候，只能停止最后一个定时器，这样不好，也不对，所以加一个判断
  20.         intervalId = setInterval(f, 1000);
  21.       }
  22.     }
        //结束定时任务
  23.     function end() {
  24.       clearInterval(intervalId); //　清除对应的那个定时器
  25.       intervalId = undefined;
  26.     }
  27.  
  28.   </script>
  29. </head>
  30. <body>
  31.  
  32. <input type="text" id="i1">
  33. <input type="button" value="开始" id="start" onclick="start();">
  34. <input type="button" value="结束" id="end" onclick="end();">
  35. </body>
  36. </html>

　　　　事件示例：

　　　　　　搜索框示例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>搜索框示例</title>
  6.  
  7. </head>
  8. <body>
  9.     <input id="d1" type="text" value="请输入关键字" onblur="blur()" onfocus="focus()">
  10.  
  11. <script>
  12. function focus(){  //如果在标签中写的blur()等方法，没有传入this参数，那么我们就需要自己来获取一下这个标签，例如下面的getElementById('d1')
  13.     var inputEle=document.getElementById("d1");
  14.     if (inputEle.value==="请输入关键字"){
  15.         inputEle.value="";
    　　　　 //inputEle.setAttribute('value','')
  16.     }
  17. }
  18.  
  19. function blur(){
  20.     var inputEle=document.getElementById("d1");
  21.     var val=inputEle.value;
  22.     if(!val.trim()){
  23.         inputEle.value="请输入关键字";
  24.     }
  25. }
  26. </script>
  27. </body>
  28. </html>

　　　　　　select联动：选择省份，自动列出所有的城市，例如：选择河北省就显示河北省所有的市

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="x-ua-compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1">
  7.   <title>select联动</title>
  8. </head>
  9. <body>
  10. <select id="province">
  11.   <option>请选择省:</option>
  12. </select>
  13.  
  14. <select id="city">
  15.   <option>请选择市:</option>
  16. </select>
  17.  
  18. <script>
  19.   data = {"河北省": ["廊坊", "邯郸"], "北京": ["朝阳区", "海淀区"], "山东": ["威海市", "烟台市"]};
  20.  
  21.   var p = document.getElementById("province");
  22.   var c = document.getElementById("city");
  23.   //页面一刷新就将所有的省份都添加到select标签中
  24.   for (var i in data) {
  25.     var optionP = document.createElement("option"); //创建option标签
  26.     optionP.innerHTML = i; //将省份的数据添加到option标签中
  27.     p.appendChild(optionP);//将option标签添加到select标签中
  28.   }
      //只要select中选择的值发生变化的时候，就可以触发一个onchange事件，那么我们就可以通过这个事件来完成select标签联动
  29.   p.onchange = function () {
        //1.获取省的值
  30.     var pro = (this.options[this.selectedIndex]).innerHTML;//this.selectedIndex是当前选择的option标签的索引位置，this.options是获取所有的option标签，通过索引拿到当前选择的option标签对象，然后.innerHTML获取对象中的内容，也就是省份
  31.     //还可以这样获取省：var pro = this.value;
        var citys = data[pro]; //2. 通过上面获得的省份去data里面取出该省对应的所有的市
  32.     // 3. 清空option
  33.     c.innerHTML = ""; //清空显示市的那个select标签里面的内容
  34. 　　
  35.  
  36.     //4.循环所有的市，然后添加到显示市的那个select标签中
  37.     for (var i=0;i<citys.length;i++) {
  38.       var option_city = document.createElement("option");
  39.       option_city.innerHTML = citys[i];
  40.       c.appendChild(option_city);
  41.     }
  42.   }
  43. </script>
  44. </body>
  45. </html>

java script DOM BOM的更多相关文章

  1. web前端-----JAVA Script（一）

      JavaScript概述 JavaScript的历史 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中).后将其改名ScriptEase ...

  2. 10张思维导图带你学习Java​Script

    10张思维导图带你学习Java​Script   下面将po出10张JavaScript相关的思维导图. 分别归类为: JavaScript变量 JavaScript运算符 JavaScript数组 ...

  3. Java Script 学习笔记 -- 基础知识

    Java script 概述 java Script 的简介 JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称为JavaScript引擎,为 ...

  4. Java Script的认识

     JavaScript的诞生 1.Java Script诞生于1995年.由Netscape(网景公司)的程序员Brendan Eich(布兰登)与Sun公司联手开发一门脚本语言,  最初名字叫做Mo ...

  5. Java Script 编码规范【转】

    Java Script 编码规范 以下文档大多来自: Google JavaScript 编码规范指南 Idiomatic 风格 参考规范 ECMAScript 5.1 注解版 EcmaScript ...

  6. Atitit. Java script 多重多重catch语句的实现and Javascript js 异常机制

    Atitit. Java script 多重多重catch语句的实现and Javascript js 异常机制 1. 语法错误(ERROR)和运行期错误(Exception) 1 2. 错误类型判断 ...

  7. js初级DOM&BOM知识点总结

    第一章 js的组成DOM BOM ECMAScript javaScript 是一种直译是脚本语言 js语言特点 .脚本编写语言 .基于对象的语言 .简单性 .动态性 .安全性 .跨平台性 C/S是C ...

  8. 前端基础 DOM & BOM

    推荐阅读:http://www.cnblogs.com/yuanchenqi/articles/6893904.html#_label3 BOM对象 window 对象 所有浏览器都支持 window ...

  9. java script第一篇（按钮全选的实现）

    今天刚学了java script,记录下学习新知识的点滴.以下是操作步骤.鉴于我是初级者,如有错误,恳请读者指正.万分谢谢. 1.新建一个文档(用NotePad软件,为了使得在浏览器中打开不是乱码,在 ...

随机推荐

  1. C++里的强制类型转换符reinterpret_cast、static_cast 、dynamic_cast、const_cast 区别

    C 风格(C-style)强制转型如下: (T) exdivssion // cast exdivssion to be of type T 函数风格(Function-style)强制转型使用这样的 ...

  2. UGUI实现unity摇杆

    http://www.winig.cc/archives/348 好久没有写文章了,最近在做项目是用的unity最新的ui系统UGUI,项目需要做一个摇杆,网上大部分都是用的插件和NGUI做的摇杆,u ...

  3. unity关于StartCoroutine的简单线程使用

    StartCoroutine在unity3d的帮助中叫做协程,意思就是启动一个辅助的线程. 在C#中直接有Thread这个线程,但是在unity中有些元素是不能操作的.这个时候可以使用协程来完成. 使 ...

  4. 51nod1093(推公式＆找規律)

    題目鏈接:http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1093 題意:中文題誒- 思路:xjb 一開始死活想不出怎麼將一 ...

  5. hoj2798 Globulous Gumdrops

    Globulous Gumdrops My Tags   (Edit)   Source : 2008 Stanford Programming Contest   Time limit : 1 se ...

  6. 2012 Noip提高组 Day1

    1262. [NOIP2012] Vigenère 密码 ★   输入文件:vigenere.in   输出文件:vigenere.out   简单对比时间限制:1 s   内存限制:128 MB [ ...

  7. [Xcode 实际操作]三、视图控制器-(3)使用UINavigationController视图控制器

    目录:[Swift]Xcode实际操作 本文将演示导航视图控制器的使用. 选择项目导航区的资源文件夹.需要导入两张图片,作为选项卡控制器的图标. [+]->[Import]->选择图片-& ...

  8. IT兄弟连 JavaWeb教程 JSP经典面试题

    1．JSP标准提供了三种独立的向JSP添加Java代码的技术,请列举. <% %>JSP程序代码块,内部可以直接嵌入Java代码. <%! %>JSP声明区,内部可以声明变量和 ...

  9. kafka 安装部署

    环境:ubuntu 12.04 64位桌面版 解压kafka -0.10.0.0.tgz -C /root/software/ 进入目录 cd kafka_2.-0.10.0.0/ 创建data 目录 ...

  10. PJzhang:国内常用威胁情报搜索引擎说明

    猫宁!!! 参考链接: https://www.freebuf.com/column/136763.html https://www.freebuf.com/sectool/163946.html 如 ...