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. Spring-Kafka —— 消费如何达到最高的吞吐量

    首先简单的介绍一下消费者对topic的订阅.客户端的消费者订阅了topic后,如果是单个消费者,那么消费者会顺序消费这些topic分区中的数据,如果是创建了消费组有多个消费者,那么kafak的服务端将 ...

  2. unity+android权限--打开应用不弹权限,动态请求权限

    因为笔者之前的游戏需要分享图片,会请求外部储存,第一次打开游戏就会出现弹窗: 很多人对这个很敏感,怕你访问到他们的照片隐私,看到这个权限就拒绝,甚至卸载,实际上我们只是想截屏游戏内容分享给其他玩家,但 ...

  3. 【POJ - 2078】Matrix（dfs）

    -->Matrix Descriptions: 输入一个n×n的矩阵,可以对矩阵的每行进行任意次的循环右移操作,行的每一次右移后,计算矩阵中每一列的和的最大值,输出这些最大值中的最小值. Sam ...

  4. 配置glance使用ceph作为后端存储

    在ceph监视器上执行 1.创建pool池 为glance服务创建pool池(因为我只有一个OSD节点,所以要将副本数设置为1) ceph osd pool create glance-images  ...

  5. CTF中对web服务器各种提权姿势

    在我们拿下服务器web服务往往只是低权限用户,对于内网渗透,我们往往需要root权限,Linux系统提权包括使用溢出漏洞已及利用系统配置文件. 提权前提: 1.拿到低权限shell 2.被入侵机器上有 ...

  6. jQuery代码书写规范

    1. 对于同一个对象不超过三个操作的,可以直接写成一行 $("li").show().unbind("click"); 2. 对于同一个对象的较多操作,建议每行 ...

  7. 【计算机视觉】TPAMI的Editors

    写了一篇文章准备试试TPAMI,没指望中,就当听听意见也好,让选两个Editors (2 preferred editors required),于是调研了一下这些人都是做什么的,有同行路过请评价补充 ...

  8. Go语言入门篇-JSON&http调用

    一.Decoder /(一)Decoder func DecoderExample(){ const jsonStream = ` { "Name" : "Ed" ...

  9. day26 封装、多态、内置函数、反射、动态导入

    今日内容 1.封装 什么是封装? 封装从字面意思上看就只将某种东西封起来装好,当我们代码中的某些方法与属性不想让外界进行访问时,就对这些属性进行特殊的处理,使这种属性或者方法不能被外界直接进行访问或者 ...

  10. Linux 打包QT程序到未安装QT的其他Linux主机下运行

    昨天终于改好了一个开源但是用起来有问题的串口调试助手,想把它打包一下以后在其他电脑上也可以用. 找了网上的一个教程打包后,在本机上可以正常使用,但是移植到另一台上就出现缺少xcb的提示. 上网搜资料倒 ...