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. Attention机制在深度学习推荐算法中的应用(转载)

    AFM:Attentional Factorization Machines: Learning the Weight of Feature Interactions via Attention Ne ...

  2. playbook文件内容解释

    [root@node1 playbook]# cat nginx.yml - hosts: test \\主机组,要和nginx.yml在同一个目录下 remote_user: root \\远端执行 ...

  3. 前台请求响应json

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  4. Java 基础篇之泛型

    背景 在没有泛型前,一旦把一个对象丢进集合中,集合就会忘记对象的类型,把所有的对象都当成 Object 类型处理.当程序从集合中取出对象后,就需要进行强制类型转换,这种转换很容易引起 ClassCas ...

  5. java实验题目

    1. 打印输出所有的“水仙花数”,所谓“水仙花数”是指一个3位数,其中各位数字立方和等于该数本身.例如,153是一个“水仙花数”. 实验源码: public class number1 { publi ...

  6. React生命周期使用

    组件的生命周期可分成三个状态: Mounting:已插入真实 DOM Updating:正在被重新渲染 Unmounting:已移出真实 DOM 生命周期的方法有: componentWillMoun ...

  7. *【Python】【demo实验31】【练习实例】【使用turtle画小猪佩奇】

    如下图小猪佩奇: 要求使用turtle画小猪佩奇: 源码: # encoding=utf-8 # -*- coding: UTF-8 -*- # 使用turtle画小猪佩奇 from turtle i ...

  8. plsql软件使用手册

    记录登陆密码及用户名

  9. 易混乱javascript知识点简要记录

    一.== vs === ==在做判断时,如果对比双方的类型不一样的话,就会进行类型转换 假如我们需要对比 x 和 y 是否相同,就会进行如下判断流程: 首先会判断两者类型是否相同.相同的话就是比大小了 ...

  10. spring-boot war包部署（二）

    环境 jdk 8 tomcat 8.5 sts 4.4.2 maven 3.6.1 背景 有时候,服务器已经有了,我们必须要使用 war 包进行部署,所以需要 spring boot 支持打包和部署成 ...