<!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. PHP MySQL 插入数据

    PHP MySQL 插入数据 使用 MySQLi 和 PDO 向 MySQL 插入数据 在创建完数据库和表后,我们可以向表中添加数据. 以下为一些语法规则: PHP 中 SQL 查询语句必须使用引号 ...

  2. IntelliJ IDEA下Git的配置与使用（命令行下）

    1. 安装Git并配置好Git 安装与配置参见Git与码云(Git@OSC)入门-如何在实验室和宿舍同步你的代码(1)中的2.在本机安装Git与3.1 配置git. 2. 创建远程仓库 在gitee. ...

  3. 事务的特性(ACID)

    一.事务 定义:所谓事务,它是一个操作序列,这些操作要么都执行,要么都不执行,它是一个不可分割的工作单位. 准备工作:为了说明事务的ACID原理,我们使用银行账户及资金管理的案例进行分析. // 创建 ...

  4. [BBS]搭建开源论坛之Jforum搭配开源CKEDITOR

    本文作者:sushengmiyan 本文地址:http://blog.csdn.net/sushengmiyan/article/details/47946065 使用默认的编辑器的时候,格式都无法保 ...

  5. 用Netty解析Redis网络协议

    用Netty解析Redis网络协议 根据Redis官方文档的介绍,学习了一下Redis网络通信协议.然后偶然在GitHub上发现了个用Netty实现的Redis服务器,很有趣,于是就动手实现了一下! ...

  6. Android音频焦点处理相关的方法

    有这么一种场景:你打开qq音乐.优酷客户端.视频播放的时候.这个时候突然来电显示了,此时所有的MediaPlayer相关的服务或者响应都进入"休眠"状态.那么,这个功能是怎么实现的 ...

  7. android studio 转为eclipse快捷键后还存在的问题汇总

    提取局部变量:Ctrl+Alt+V 提取全局变量:Ctrl+Alt+F 提取方法:Shit+Alt+M 使用android studio 出现红色下划线代表有错误产生,eclipse中的Ctrl+1( ...

  8. MongoDb 用 mapreduce 统计留存率

    MongoDb 用 mapreduce 统计留存率(金庆的专栏)留存的定义采用的是新增账号第X日:某日新增的账号中,在新增日后第X日有登录行为记为留存 输出如下:(类同友盟的留存率显示)留存用户注册时 ...

  9. SceneKit:简单的3D游戏场景搭建

    SceneKit是Apple用来开发休闲3D游戏的框架,不同于底层的OpenGL库,你仅仅需要很少的代码就可以快速看到实际的3D场景效果.下面简单的聊聊搭建一个3D游戏场景需要做的事情. 首先你必须用 ...

  10. Oracle 11g客户端及PLSQL Developer配置|Instant Client Setup-64位|OraClientLite11g_x86

    转载自:http://blog.csdn.net/xiaoyw71/article/details/45311589 Oracle 11g客户端 资源 下载资源,直接解压进行配置 Oracle官方资源 ...