1:单击事件 --onclick

 function test01(){

     alert("js的单击事件");

 }

2:双击事件--ondblclick

 function test02(){

     alert("js的双击事件");

 }

3:鼠标移动事件--onmousemove

 function testOnmousemove(){

     alert("鼠标划到div框就触发事件");

 }

4:当鼠标移进去触发的事件-- onmouseenter

 function testOnmouseenter(){

     alert("我进来了");

 }

5:当鼠标移出触发的事件--onmouseout

 function testOnmouseout(){

     alert("我出来了");

 }

6:键盘按下并弹起的时候会触发事件 --onkeyup

 function testOnkeyup(str){

     alert(str);

 }

7:成为焦点--onfocus

8:当对象失去焦点 --onblur.如果输入框里面没有内容就显示--请输入用户名,如果输入框里面有内容就不做其他操作

 function testOnblur(str){

     //alert(str)

     if(str==""){

         document.getElementById("textid").value="请输入内容";

     }else{

         return;

     }

 }

9:当对象发生改变的时候-- onchange

 function testOnchange(str){

     alert(str);

 }

10:页面装载 完成后触发的代码 --onload

 function testOnload(){

     var d = new Date();

         var str = d.getFullYear()+"-"+(d.getMonth()+1)+"-"+d.getDate()+" "+d.getHours()+":"+d.getMinutes()+":"+d.getSeconds();

         //获取divdate对象

         document.getElementById("divdate").innerText = str;

         window.setTimeout(testOnload,1000);

 }

详情代码：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>js事件</title>

         <style type="text/css">

             #div01{

                 border: solid 1px red;

                 width: 140px;height: 50px;

             }

             #div02{

                 border: solid 1px green;

                 width: 140px;height: 50px;

             }

         </style>

     </head>

     <body onload="testOnload();">

         <div id="divdate" style="border: solid 1px red;height: 20px;width: 175px;">

         </div>

         <input type="button" value="单击事件" onclick="test01();" />

         <input type="button" value="双击事件" ondblclick="test02();" />

         <div id="div01" onmousemove="testOnmousemove();"></div><br />

         <div id="div02" onmouseenter="testOnmouseenter();" onmouseout="testOnmouseout();"></div><br />

         <input type="text" value="" onkeyup="testOnkeyup(this.value);"/> <br />

         <input type="text" id="textid" value="请输入内容" onfocus="this.value=''" onblur="testOnblur(this.value);" />

         <input type="text" placeholder="请输入用户名" value="" /><br />

         <select onchange="testOnchange(this.value);">

             <option value="1">6K</option>

             <option value="2">10K</option>

             <option value="3">20K</option>

             <option value="4">40K</option>

         </select>

     </body>

     <script type="text/javascript">

         //1:单击事件 --onclick

         function test01(){

             alert("js的单击事件");

         }

         //2:双击事件--ondblclick

         function test02(){

             alert("js的双击事件");

         }

         //3:鼠标移动事件--onmousemove

         function testOnmousemove(){

             alert("鼠标划到div框就触发事件");

         }

         //4:当鼠标移进去触发的事件-- onmouseenter

         function testOnmouseenter(){

             alert("我进来了");

         }

         //5:当鼠标移出触发的事件--onmouseout

         function testOnmouseout(){

             alert("我出来了");

         }

         //6:键盘按下并弹起的时候会触发事件 --onkeyup

          function testOnkeyup(str){

              alert(str);

          }

          //7:成为焦点--onfocus

         /* function testOnfocus(){

          }*/

         //8:当对象失去焦点 --onblur

         //如果输入框里面没有内容就显示--请输入用户名

         //如果输入框里面有内容就不做其他操作

         function testOnblur(str){

             //alert(str)

             if(str==""){

                 document.getElementById("textid").value="请输入内容";

             }else{

                 return;

             }

         }

         //9:当对象发生改变的时候-- onchange

         function testOnchange(str){

             alert(str);

         }

         //10:页面装载 完成后触发的代码 --onload

         function testOnload(){

             var d = new Date();

                 var str = d.getFullYear()+"-"+(d.getMonth()+1)+"-"+d.getDate()+" "+d.getHours()+":"+d.getMinutes()+":"+d.getSeconds();

                 //获取divdate对象

                 document.getElementById("divdate").innerText = str;

                 window.setTimeout(testOnload,1000);

         }

     </script>

 </html>

js基本事件的更多相关文章

  1. JS基本事件（小记）

    一.    事件的概念种类及作用(一)    概念:通常鼠标或热键的动作我们称之为事件(event),热键引发的一连串程序的动作,称之为事件驱动(event Driver).而对事件进行处理的程序或函 ...

  2. 404boom 博客闪现【不断的优化更新中。。。】

    404boom 博客闪现[不断的优化更新中...] 停止本篇博文EQ继续优化,所有博文将会在标签[cnblogs_v2 ]中重新整理,待完成统一放上链接 一:Java SE相关1.Java的概述2.J ...

  3. js中基本事件的总结，onclick、onblur、onchange等

    js中的基本事件总结: 特定的场景下发生的一个动作:事件:事件=函数(),事件发生会触发函数执行. 属性 当以下情况发生时,出现此事件 FF N IE onabort 图像加载被中断 1 3 4 on ...

  4. 5月12日上课笔记-js 弹出框、函数、程序调试、基本事件、浏览器对象模型

    一.弹出框 a.提示框 alert(); b.输入框 prompt(); c.确认框 confirm(); var flag= confirm("确认删除吗?"); 二.js程序调 ...

  5. 自己手写的自动完成js类

    在web开发中,为了提高用户体验,会经常用到输入框的自动完成功能,不仅帮助用户进行快速输入,最重要的是帮助那些“记不全要输入什么”的用户进行选择.这个功能有很多插件已经实现了,为了适应项目的特殊需求, ...

  6. 学习RaphaelJS矢量图形包--Learning Raphael JS Vector Graphics中文翻译（一）

    (原文地址:http://www.cnblogs.com/idealer3d/p/LearningRaphaelJSVectorGraphics.html) 前面3篇博文里面,我们讲解了一本叫做< ...

  7. 移动端-js触摸事件

    开发者工具 在移动开发中,一种较为容易的做法是,先在桌面上开始原型设计,然后再在打算要支持的设备上处理移动特有的部分.多点触摸正是难以在PC上进行测试的那些功能之一,因为大部分的PC都没有触摸输入. ...

  8. touch.js——常见应用操作

    touch.js--常见应用操作 基本事件: touchstart   //手指刚接触屏幕时触发 touchmove    //手指在屏幕上移动时触发 touchend     //手指从屏幕上移开时 ...

  9. 【翻译】Ext JS 5的委托事件和手势

    原文:Delegated Events and Gestures in Ext JS 5 简介 Ext JS在5之前的版本,被设计为专用于传统鼠标输入的桌面设备使用.而从5开始,添加了对触屏输入的支持 ...

随机推荐

  1. SQL中group by后面的having中不能使用别名

    如下图中,SQL中需要对group by的结果使用having进行过滤,不能使用select中定义的别名,需要使用查询字段的原始名.否则会报错,列明未定义. 下图未错误演示: 修改后,正确的SQL语句 ...

  2. php获取服务器ip方法

    public static function getServerIp() { if(!empty($_SERVER['SERVER_ADDR'])) { return $_SERVER['SERVER ...

  3. Servlet(1)：基础概念/最简实例

    Servlet 生命周期(1) init()方法初始化Servlet对象  它在第一次创建Servlet时被调用,在后续每次不同用户请求时不再调用.(2) service()方法来处理客户端的请求  ...

  4. git合并时忽略某个文件

    因为开发现场跟部署的环境不同,有很多ip地址每次都要改来改去;于是开两个分支master(用来保存部署现场的ip)和dev(开发环境的ip),开发功能时在dev分支,然后使用master合并,每个分支 ...

  5. 微信扫码无法直接下载APP的apk的解决办法

    PHP的处理方式:http://blog.sina.com.cn/s/blog_4cd978f90102wx92.html

  6. C#规范整理·资源管理和序列化

    资源管理(尤其是内存回收)曾经是程序员的噩梦,不过在.NET平台上这个噩梦似乎已经不复存在.CLR在后台为垃圾回收做了很多事情,使得我们现在谈起在.NET上进行开发时,都会说还是new一个对象吧!回收 ...

  7. 论文阅读 | A Survey on Multi-Task Learning

    摘要 多任务学习(Multi-Task Learning, MTL)是机器学习中的一种学习范式,其目的是利用包含在多个相关任务中的有用信息来帮助提高所有任务的泛化性能. 首先,我们将不同的MTL算法分 ...

  8. redis的单线程模型

    redis的单线程模型 redis使用文本事件处理器file event handler ,整个文件事件处理器是单线程的, 所以才叫做单线程模型,他采用IO多路复用机制同时监听多个socket,根据s ...

  9. Linux文件属性之Linux文件删除重要原理详解

    Linux下文件删除的原理 只要dongdaxiafile(源文件).服务进程.dongdaxiaflie_hard_link(硬链接文件)三个中的任意一个存在文件不会被删除.

  10. cmake升级到3.10以上

    使用yun install cmake3 安装 ,不会覆盖centos7 cmake 1 添加cmake3 源 echo '[group_kdesig-cmake3_EPEL]name=Copr re ...