<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<script type="text/javascript">

/*

常用的事件：

    鼠标点击相关：

        onclick 在用户用鼠标左键单击对象时触发。

        ondblclick 当用户双击对象时触发。

        onmousedown 当用户用任何鼠标按钮单击对象时触发。

        onmouseup 当用户在鼠标位于对象之上时释放鼠标按钮时触发。 

    鼠标移动相关：

        onmouseout  当用户将鼠标指针移出对象边界时触发。

        onmousemove 当用户将鼠标划过对象时触发。 

    焦点相关的：

        onblur 在对象失去输入焦点时触发。

        onfocus 当对象获得焦点时触发。

    其他：

        onchange 当对象或选中区的内容改变时触发。

        onload 在浏览器完成对象的装载后立即触发。

        onsubmit 当表单将要被提交时触发。

*/

    function clickTest(){

        alert("单击..");

    }

    function dbClick(){

        alert("双击..");

    }

    function showTime(){

        var timeSpan = document.getElementById("timeSpan");

        var date  = new Date().toLocaleString();

        timeSpan.innerHTML = date.fontcolor("red");

    }

    function hideTime(){

        var timeSpan = document.getElementById("timeSpan");

        timeSpan.innerHTML = "";

    }

    function showInfo(){

        var timeSpan = document.getElementById("userName");

        timeSpan.innerHTML = "用户名是由6位的英文与数字组成".fontcolor("green");

    }

    function hideInfo(){

        var timeSpan = document.getElementById("userName");

        timeSpan.innerHTML = "";

    }

    function change(){

        alert("城市改变了..");

    }

</script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

</head>

<body>

    <input type="button" onclick="clickTest()"  value="单击" />

    <input type="button" ondblclick="dbClick()" value="双击"/>

    <span onmousemove="showTime()" onmouseout="hideTime()" >查看当前系统时间：</span><span id="timeSpan"></span>

    用户名<input type="text" onfocus="showInfo()"  onblur="hideInfo()"  /> <span id="userName"></span>

    <select onchange="change()" >

        <option>广州</option>

        <option>深圳</option>

        <option>上海</option>

    </select>

</body>

</html>

javascript之常用事件的更多相关文章

  1. Javascript中常用事件集合和事件使用方法

    Javascript中常用事件集合和事件使用方法 一.事件绑定 格式: 事件源 . on事件类型=事件处理函数 事件绑定三要素 1.事件源:和谁绑定 2.事件类型:什么事件 3.事件处理函数:触发了要 ...

  2. Javascript中常用事件的命名

    OnClick :单击事件 OnChange:改变事件 OnSelect:选中事件 OnFocus:获得焦点事件 OnBlur:失去焦点事件 Onload:载入文件 OnUnload:卸载文件 anc ...

  3. 学习笔记：javascript body常用事件

    Window 事件属性 针对 window 对象触发的事件(应用到 <body> 标签): 属性 值 描述 onafterprint script 文档打印之后运行的脚本. onbefor ...

  4. javascript页面常用事件

    事件名称 描述 onload和 onunload(已过时) 当用户进入或离开页面时就会触发onload和onunload事件,onload是页面所有元素都加载完之后才加载onload onfocus, ...

  5. javascript的常用事件

  6. JavaScript交互式网页设计 • 【第2章 JavaScript函数与事件】

    全部章节   >>>> 本章目录 2.1 JavaScript 自定义函数 2.1.1 函数的定义 2.1.2 函数的调用 2.1.3 函数的参数 2.1.4 函数的返回值 2 ...

  7. 请写出JavaScript中常用的三种事件。

    请写出JavaScript中常用的三种事件. 解答: onclick,onblur,onChange

  8. JavaScript基础之常用事件

    js 基础之常用事件 在js当中,事件是较为常用的内容,本篇文章来说一些常用的事件. 鼠标事件 下面是常用的鼠标事件: click 当用户按下并释放鼠标按键或其他方式"激活"元素时 ...

  9. javascript中常用的DOM事件

    //常用事件 onclick 点击事件 onmousedown 鼠标按下 onmousemove 鼠标移动 onmouseup 鼠标抬起 onmouseover 鼠标放上 onmouseout 鼠标放 ...

随机推荐

  1. 关于php的发展前景

    php7 宣称速度比php5.6快两倍,宣称要打破一切旧规则 2015年,php 7.0发布 2016年,php 7.1发布 2017年,php 7.2发布 2018年,php 7.3发布 2019年 ...

  2. Delphi 配置BDE数据源

    樊伟胜

  3. linux-pcap 抓包程序框架

    转:http://blog.chinaunix.net/uid-21556133-id-120228.html libpcap详解 2010-12-01 22:07 libpcap(Packet Ca ...

  4. sprintf的使用

    头文件:stdio.h 函数原型:int sprintf(char *buffer, const char *format, [argument]…) 参数: (1)buffer:是char类型的指针 ...

  5. 微信小程序音乐播放器

    写在前面 1.入门几天小白的作品,希望为您有帮助,有好的意见或简易烦请赐教 2.微信小程序审核音乐类别已经下架,想要发布选题需慎重.附一个参考链接,感谢https://www.hishop.com.c ...

  6. BaseAdapter的使用与优化

    1.逗比式 //逗比式............................................ //加载布局文件 //将xml文件转化为view,获取到view//由于我们只需要将XM ...

  7. linux TAILQ_ENTRY

    #include <sys/queue.h> TAILQ_ENTRY 队列 http://www.360doc.com/content/15/1222/14/29292169_522271 ...

  8. FastDFS分布式图片服务器搭建

    一:Fastdfs简介 1. 什么是FastDFS FastDFS 是用 c 语言编写的一款开源的分布式文件系统.FastDFS 为互联网量身定制, 充分考虑了冗余备份.负载均衡.线性扩容等机制,并注 ...

  9. 部署nginx脚本

    cd nginx-1.12.2useradd -s /sbin/nologin nginx./configuremakemake installyum -y install mariadb maria ...

  10. jQuery数据管理：Kendo UI过滤器设置运算符

    Kendo UI for jQuery最新试用版下载 Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support f ...