body, table{font-family: 微软雅黑; font-size: 10pt}
table{border-collapse: collapse; border: solid gray; border-width: 2px 0 2px 0;}
th{border: 1px solid gray; padding: 4px; background-color: #DDD;}
td{border: 1px solid gray; padding: 4px;}
tr:nth-child(2n){background-color: #f8f8f8;}

鼠标移动事件
鼠标点击事件(click/dblclick/mousedown/mouseup)
加载与卸载事件(load/unload)
聚焦与离焦事件
键盘事件
提交与重置事件
选择与改变事件   //比如选地址，选完省份后面跟着跳出对应的市区
  <script type="text/javascript">
  //回调函数   我们没有显示的调用它。
        function movefunc(event){
                //window.status = "hello"; //浏览器左下角状态栏显示信息
                window.status = event.clientX+","+event.clientY;
                //alert("hello");
        }
        function clear(event){      //与上面相对,括号里可以不传参数
                window.status = "清空了";
        }
        function over(){  //鼠标遇到div边界触发
                //alert("I am in");
        }
  </script>
<center>
<div style="border:solid 2px; width:5cm; height:5cm" onmousemove = "movefunc(event)" onmouseout="clear(event)" onmouseover="over()">
</div>

  <script type="text/javascript">
        function function1(){
                alert("你刚刚双击了!");
        }
        function function2(){
                alert("你刚刚单击了!");
        }
  </script>
<input type="button" value="双击我" ondblclick="function1()">
<input type="button" value="单击我" onclick="function2()">

  <script type="text/javascript">
        function changePosition(){
                var adv = window.document.getElementById("adv");
                adv.style.top=Math.random()*60+"px";
                adv.style.left=Math.random()*100+"px";
                setTimeout("changePosition()",1000);
        }
        function showmsg(){
                alert("要关闭了");
        }
  </script>
<body onload="changePosition()" onunload="showmsg()">
<div id="adv" style="position:absolute; top:0.5cm; left:1cm">
<a href="http://www.baidu.com" target="_blank"><img src="cartoon.gif" /></a>
</div>

 
<script type="text/javascript">
             function cleardefault(){
                       document.getElementById("name").value="";
                 }
                 function validate(){       
                                 var psd=  document.getElementById("psd").value ;
                                if(psd=="")
                                   alert("密码不能为空")
                 }
</script>

<pre>
  用户名 <input  id="name" type="text" value="请在此输入姓名"  onfocus="cleardefault()" onblur="alert('用户名不能为空')"  ><br>
  密  码 <input  id="psd" type="password" value=""    onblur="validate()">
</pre>
  <script type="text/javascript">
     function handle(event){
          if(event.keyCode==13)   //keycode 是对应键值的ascII码,确认是13
                     alert("你点击了确认键，请问是否要提交？")
         }
  </script>
  <form method="post" action="">
                <input type="text" value="123" onkeypress="handle(event)"  />
  </form>

 <script type="text/javascript">
      function confirm_xxx(){            //当用户点击表单里的提交按钮时，自动被调用
      var confrimvalue=  window.confirm("是不是要提交");
      if( confrimvalue )
             return true;
      else
             return false;
        }
        function showmsg(){
            alert("数据已经复位！")
                }
  </script>
 <form method="post" action="02inner.html" onsubmit="return confirm_xxx(this)  onreset="showmsg()" >
         <input type="submit" value="提交"  onclick="alert('hello')"/>
//onclick不要也可以，点击提交会执行function
        <input type="reset" value="重置" />
</form>

  <script type="text/javascript">
      function changCity(){
                  //先获取第一个select的值
                 var select1=   document.getElementById("province")
                 citylist1=['济南','青岛','威海'];
                 citylist2=['长沙','岳阳','湘潭'];
                 var select2=   document.getElementById("city")
                 if(select1.selectedIndex==1){
                       for(var i=0;i<citylist1.length;i++)
                             select2.innerHTML +=   "<option value=" +citylist1[i]+  ">"+citylist1[i]+"</option>"
                  }else{
                      for(var i=0;i<citylist2.length;i++)
                           select2.innerHTML +=   "<option value=" +citylist2[i]+  ">"+citylist2[i]+"</option>"
                  }
     }
   </script>
      籍贯：
     <select id="province" onchange="changCity()">
            <option value="0">请选择省份</option>
            <option value="1">山东</option>
            <option value="2">湖南</option>
     </select>
     <select id="city"></select>

BOM之JavaScript常用事件的更多相关文章

  1. JavaScript常用事件

    一般事件 事件 浏览器支持 描述 onClick HTML: 2 | 3 | 3.2 | 4   Browser: IE3 | N2 | O3 鼠标点击事件,多用在某个对象控制的范围内的鼠标点击 on ...

  2. javascript——常用事件总结

      Event对象:Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态. 事件标签属性 当以下情况发生时,出现此事件 onabort 图像加载被中断 ...

  3. js中的BOM和DOM常用事件方法

    笔记: window对象 ● window.innerHeight - 浏览器窗口的内部高度 ● window.innerWidth - 浏览器窗口的内部宽度 ● window.open() - 打开 ...

  4. JavaScript常用事件参考

      onabort 图像加载被中断 onblur 元素失去焦点 onchange 用户改变域的内容 onclick 鼠标点击某个对象 ondblclick 鼠标双击某个对象 onerror 当加载文档 ...

  5. javascript常用事件及方法

    1.获取鼠标坐标,考虑滚动条拖动 var e = event || window.event; var scrollX = document.documentElement.scrollLeft || ...

  6. javascript之常用事件

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. JavaScript基础之常用事件

    js 基础之常用事件 在js当中,事件是较为常用的内容,本篇文章来说一些常用的事件. 鼠标事件 下面是常用的鼠标事件: click 当用户按下并释放鼠标按键或其他方式"激活"元素时 ...

  8. Javascript中常用事件集合和事件使用方法

    Javascript中常用事件集合和事件使用方法 一.事件绑定 格式: 事件源 . on事件类型=事件处理函数 事件绑定三要素 1.事件源:和谁绑定 2.事件类型:什么事件 3.事件处理函数:触发了要 ...

  9. javaScript入门之常用事件

    JS中的常用事件 onfocus/onblur:聚焦离焦事件,用于表单校验的时候比较合适. onclick/ondblclick:鼠标单击和双击事件 onkeydown/onkeypress:搜索引擎 ...

随机推荐

  1. Swap---hdu2819(最大匹配)

    题意:通过交换行或者列来实现对角线(左上角到右下角)上都是1, 首先,如果某行全是0或者某列全是0必然不满足情况输出-1,如果能转换的话,那么必然可以通过全由行(列)变换得到: 还有就是对角线上的N个 ...

  2. vue.js（四）

    由于组件内容太多又特别关键,我决定在官网教程的基础上,加上自己的理解,针对每个内容详细记录一下  1.注册组件 ①全局注册 //首先创建组件 Vue.component('blog-post', { ...

  3. idea一个类中，各个修饰符的符号表示

    1: 2:

  4. 使用distcp并行拷贝大数据文件

    以前我们介绍的访问HDFS的方法都是单线程的,Hadoop中有一个工具可以让我们并行的拷贝大量数据文件,这个工具就是distcp. distcp的典型应用就是在两个HDFS集群中拷贝文件,如果两个集群 ...

  5. [py]python中的==和is的区别

    is比较id id(a) == id(b) == id(c) a is d #false ==比较值 a==b #true 举个例子:a = 1 b = a c = 1 d = 1.0 这里有3个对象 ...

  6. 跟我学Makefile（二）

    命令出错: 每当命令运行完后, make 会检测每个命令的返回码,如果命令返回成功,那么 make 会执行下一条命令. 如果一个规则中的某个命令出错了(命令退出码非零),那么 make 就会终止执行当 ...

  7. [LeetCode]160.Intersection of Two Linked Lists(2个链表的公共节点)

    Intersection of Two Linked Lists Write a program to find the node at which the intersection of two s ...

  8. Entity Framework Code First在Oracle下的伪实现（转）

    为什么要说是伪实现,因为还做不到类似MsSql中那样完全的功能.Oralce中的数据库还是要我们自己手动去创建的.这里,我们舍掉了Model First中的EDMX文件,自己在代码里面写模型与映射关系 ...

  9. Underscore-逐行分析

    标签: // Underscore.js 1.8.3// http://underscorejs.org// (c) 2009-2015 Jeremy Ashkenas, DocumentCloud ...

  10. 如何使用STM32F4的BootLoader和APP程序

    源:如何使用STM32F4的BootLoader和APP程序 STM32 BootLoader升级固件