<!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">

    /*

    事件：

        注册事件的方式：

            方式一： 直接在html元素上注册

                <body onload="ready()">

                function ready(){

                    alert("body的元素被加载完毕了..");

                }

            方式二：可以js代码向找到对应的对象再注册。 推荐使用。

			var bodyNode = document.getElementById("body");

			bodyNode.onload = function(){

				alert("body的元素被加载完毕");

			}

    */	

    </script>

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

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

</head>

<body id="body">

</body>

</html>

</pre><pre code_snippet_id="1695084" snippet_file_name="blog_20160524_3_7585644" name="code" class="html">

案例：依据图片内容，编写代码。

图片如下：

代码写了出来：

<!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之BOM事件注册和案例的更多相关文章

  1. java基础66 JavaScript中的事件、localtion对象、screen对象（网页知识）

    1.JavaScript中的事件注册 1.1.事件的注册方式 方式1:直接在html元素上注册 <body onLoad="ready()"></body > ...

  2. [JavaScript] JavaScript事件注册,事件委托,冒泡,捕获,事件流

    面试题 event 事件 事件委托是什么? 如何阻止事件冒泡,阻止默认事件呢? Javascript 的事件流模型都有什么? 事件绑定和普通事件有什么区别? Event 对象 Event 对象,当事件 ...

  3. javascript中BOM部分基础知识总结

    一.什么是BOM      BOM(Browser Object Document)即浏览器对象模型.      BOM提供了独立于内容 而与浏览器窗口进行交互的对象:      由于BOM主要用于管 ...

  4. 【Python全栈-JavaScript】jQuery事件

    jQuery事件 一.页面载入 当DOM载入就绪可以查询及操纵时绑定一个要执行的函数. 这是事件模块中最重要的一个函数,因为它可以极大地提高web应用程序的响应速度. 简单地说,这个方法纯粹是对向 w ...

  5. 第二章 javaScript操作BOM

    什么是BOM      BOM(Browser Object Model)即浏览器对象模型.      BOM提供了独立于内容 而与浏览器窗口进行交互的对象:      由于BOM主要用于管理窗口与窗 ...

  6. javascript event（事件对象）详解

    javascript event(事件对象)详解   1. 事件对象     1. 事件对象 Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态. 什 ...

  7. 了解javascript中的事件（二）

    本文目录如下: 零.寒暄 一.事件的分类 二.事件代理 2.1 问题引出 2.2 什么是事件代理 2.3 完整示例 二.事件代理 三.事件代理思想的用处 四.总结 零.寒暄 这篇博客本该出现在两个月以 ...

  8. 第一百一十一节，JavaScript，BOM浏览器对象模型

    JavaScript,BOM浏览器对象模型 学习要点: 1.window对象 2.location对象 3.history对象 BOM也叫浏览器对象模型,它提供了很多对象,用于访问浏览器的功能.BOM ...

  9. JavaScript之onXXXX事件和addEventListener的区别

    JavaScript之onXXXX事件和addEventListener的区别 1.首先介绍两者的用法: 1.1onXXXX的用法:以onclick为例 第一种: obj.onclick = func ...

随机推荐

  1. MultiTigger 绑定异常处理

    异常产生环境: 在初始化一个窗口后,没有show出来.在此窗口中,有个控件,重写了控件模板,并加了MultiTrigger. 注意:俩个Condition,一个是从外面绑定过来的Tag,一个是Cont ...

  2. vmware迁移到openstack的一些坑

    title: 安全平台迁移 tags: 新建,模板,小书匠 grammar_cjkRuby: true --- 前言 主要有三个坑: 一是如果原先虚拟机没有安装virtio驱动,要设置设备驱动为ide ...

  3. Node.js Buffer(缓冲区)

    JavaScript 语言自身只有字符串数据类型,没有二进制数据类型. 但在处理像TCP流或文件流时,必须使用到二进制数据.因此在 Node.js中,定义了一个 Buffer 类,该类用来创建一个专门 ...

  4. MongoDB Limit与Skip方法

    MongoDB Limit() 方法 如果你需要在MongoDB中读取指定数量的数据记录,可以使用MongoDB的Limit方法,limit()方法接受一个数字参数,该参数指定从MongoDB中读取的 ...

  5. Docker 工具和示例

    pipework Jérôme Petazzoni 编写了一个叫 pipework 的 shell 脚本,可以帮助用户在比较复杂的场景中完成容器的连接. playground Brandon Rhod ...

  6. let内嵌lambda使用set!构成闭包

    查了半天没有找到scheme中判断数据类型的函数,索性自己写了个type?,发现闭包和递归有着微妙的联系. 本例中,自由变量是types,外层let初始化了types的值,内层let里的(set! t ...

  7. TCP发送源码学习(1)--tcp_sendmsg

    一.tcp_sendmsg()函数分析: int tcp_sendmsg(struct kiocb *iocb, struct sock *sk, struct msghdr *msg, size_t ...

  8. 浅谈机器人控制与仿真设计----RDS和ROS

    机器人控制.仿真或实验,主要由三个部分组成,机器人.环境和算法. 当然各部分又包含很多子部分和功能,这里主要以仿真为主,为了使得仿真结果能够直接应用到实际机器人上,这里分别以RDS和ROS对比介绍.h ...

  9. 用Codility测试你的编码能力

    没有宏观的架构设计,没有特定的框架语言.在Codility提出的一些小问题上,用最纯粹的方式测试你最基本的编码能力. Codility第一课:算法复杂度 各种算法书的开篇大多是算法分析,而复杂度(co ...

  10. Maven坐标机制

    Maven为所有的项目引入了坐标,基于坐标机制可以唯一定位一个项目. 坐标详解 以spring-core-2.5.6.jar的坐标定义为例,说明组成坐标的所有元素:groupId.artifactId ...