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. Linux Swap的那些事

    swap是干嘛的? 在Linux下,SWAP的作用类似Windows系统下的“虚拟内存”.当物理内存不足时,拿出部分硬盘空间当SWAP分区(虚拟成内存)使用,从而解决内存容量不足的情况. SWAP意思 ...

  2. 3.React中的setstate的几个现象

    转载segfault 上面的一篇文章,https://segmentfault.com/a/1190000014498196 1.在同一个方法中多次setState是会被合并的,并且对相同属性的设置只 ...

  3. Postman配置环境变量添加token

    postman测试接口时,每次都需要获取token以后,复制到接口里,特别复杂. 这里通过把获取token接口的返回数据添加到环境变量,然后将环境变量名设置在其他接口的token中,获取一次token ...

  4. 使用checked和unchecked来对整数溢出进行检测和忽略

    在C#中,整数int32的取值为-2147483648~2147473647(可以通过int.MaxValue和int.MinValue获得)当超出这个范围后,编译器不会进行检查,仍然会进行运算,但得 ...

  5. DEVOPS ROADMAP

  6. 关于字符串中每个单词的首字母大写化问题之 拆分split(/\s+/)

    var a = 'Hi, my name\'s Han Meimei, a SOFTWARE engineer'; //for循环 function titleCase(s) { var i, ss  ...

  7. DP大大大大大赏

    还是前置: 动态规划的三种实现方法: 递推,递归,记忆化搜索 然后还是从斐波那契数列开始引入: 两种求斐波那契数列的方法: 1.用其他位置的结果得到自己的结果: 2.用自己的结果算其他的结果: 以上两 ...

  8. Flask_入门

    django是个大而全的框架,flask是一个轻量级的框架. django内部为我们提供了非常多的组件:orm / session / cookie / admin / form / modelfor ...

  9. Elastic Search中Document的CRUD操作

    一. 新增Document在索引中增加文档.在index中增加document.ES有自动识别机制.如果增加的document对应的index不存在.自动创建,如果index存在,type不存在自动创 ...

  10. fio安装使用

    # wget http://brick.kernel.dk/snaps/fio-2.2.5.tar.gz # tar xvf fio-2.2.5.tar.gz# cd fio-2.2.5# ./con ...