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. centos7.6安装docker

    先运行 yum update 然后卸载旧版本 yum remove docker \ docker-client \ docker-client-latest \ docker-common \ do ...

  2. kettle在windows下面部署定时任务

    KETTLE有三大块: Spoon:转换/工作(transform/job)设计工具,主要是GUI方式. Kitchen:工作(job)执行器,是一个作业执行引擎,通过命令行的方式带参数执行,参数说明 ...

  3. 星际争霸，FF反作弊对战平台

    星际一 [FF]反作弊对战平台让作弊行为无所遁形,只为星际玩家服务的反作弊对战平台目前能检查星际霸主以及其他星际争霸ZUOBI软件支持星际113版本 支持XP WIN7 WIN8 MAC 游戏外挂带来 ...

  4. phpfpm开启pm.status_path配置，查看fpm状态参数

    php-fpm配置 pm.status_path = /phpfpm_status nginx配置 server {    root /data/www;    listen 80;    serve ...

  5. JSX AS DSL? 写个 Mock API 服务器看看

    这几天打算写一个简单的 API Mock 服务器,老生常谈哈?其实我是想讲 JSX, Mock 服务器只是一个幌子. 我在寻找一种更简洁.方便.同时又可以灵活扩展的.和别人不太一样的方式,来定义各种 ...

  6. Hive概述

    HIVE是什么    开发调试麻烦    只能用java开发     需要对hadoop的底层及api比较了解才能开发复杂代码 HQL Hive是基于Hadoop的一个数据仓库工具.可以将结构化的数据 ...

  7. MySQL_约束条件

    目录 八个约束条件 1.非空约束NOT NULL 2.主键约束PRIMARY KEY 3.多字段联合主键(复合主键) 4.唯一约束UNIQUE 5.默认约束DEFAULT 6.外键约束FOREIGN ...

  8. golang break label 与goto label

    本文链接:https://blog.csdn.net/itbsl/article/details/73380537 与其他语言一样,Go语言也支持label(标签)语法:分别是break label和 ...

  9. 生产环境Crontab专业实例

    1)书写Crontab定时任务多个基本要领 1.规范定时任务两例 例1:每分钟打印一次自己名字的全拼到 “/server/log/自己命名的文件” 中

  10. Linux操作系统原理笔记

    在Linux操作系统内核内部,进程是通过一个链表,而且是一个双向链表来管理的. 进程描述符:每一个进程都有其描述符,每一个描述符彼此之间都有关联性的.   双向链表:   一个进程内部可能包含多个线程 ...