<!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. sql 复习练习

          一.基础1.说明:创建数据库CREATE DATABASE database-name2.说明:删除数据库drop database dbname3.说明:备份sql server--- ...

  2. js强大的日期格式化函数，不仅可以格式化日期，还可以查询星期，一年中第几天等

    js强大的日期格式化,timestamp支持10位或13位的时间戳,或是时间字符串,同时支持android ios的处理,不只是日期的格式化还有其它方法,比如获 获取某月有多少天 .获取某个日期在这一 ...

  3. Django REST Framework 最佳实践

    Django REST framework 是一个强大且灵活的工具包,用以构建Web APIs. 为什么要使用REST framework? - 在线可视的API,对于赢得你的开发者们十分有用 - 验 ...

  4. PHP 安装

    PHP 安装 您需要做什么? 为了开始使用 PHP,您可以: 找一个支持 PHP 和 MySQL 的 Web 主机 在您自己的 PC 机上安装 Web 服务器,然后安装 PHP 和 MySQL 使用支 ...

  5. MySQL NULL 值处理

    MySQL NULL 值处理 我们已经知道MySQL使用 SQL SELECT 命令及 WHERE 子句来读取数据表中的数据,但是当提供的查询条件字段为 NULL 时,该命令可能就无法正常工作. 为了 ...

  6. Mysql 统一设置utf8字符

    无聊的关于有效配置文件路径的备忘 原来阿里云服务器的mysql 5.5 , 配置/etc/my.cnf是没有任何作用的,需要编辑/etc/mysql/my.cnf 妈的, 就是这一点让我测试了两天, ...

  7. Hibernate之SchemaExport的使用

    @Test public void testCreateDB(){ Configuration cfg = new Configuration().configure(); SchemaExport ...

  8. x264源代码简单分析：宏块分析（Analysis）部分-帧内宏块（Intra）

    ===================================================== H.264源代码分析文章列表: [编码 - x264] x264源代码简单分析:概述 x26 ...

  9. java之异常处理

    异常Exception我们分为 |--RuntimeException运行期异常,我们需要修正代码 |--非RuntimeException 编译期异常,必须处理的,否则程序编译不通过 异常有两种处理 ...

  10. Java中循环声明变量方法

    Java循环声明变量 之前想这样做,但是网上一直搜索不到,下面是我的方式 项目中 // 得到需要查询外表的数量,然后分别创建缓存,插入数据多的时候如果编码在缓存里面,就不需要再去查询数据库了.key: ...