<!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. hasattr(),getattr(),setattr()的使用

    # 首先你有一个command.py文件,内容如下,这里我们假若它后面还有100个方法 class MyObject(object): def __init__(self): self.x = def ...

  2. JavaScript正则表达式模式匹配(5)——特殊字符匹配、换行模式

    特殊字符匹配 var pattern=/\[/; // 用\符号来转义正则里的特殊字符才能匹配 var str='['; alert(pattern.test(str)); 换行模式 var patt ...

  3. Docker常见仓库WordPress

    WordPress 基本信息 WordPress 是开源的 Blog 和内容管理系统框架,它基于 PhP 和 MySQL. 该仓库提供了 WordPress 4.0 版本的镜像. 使用方法 启动容器需 ...

  4. RDO Stack: Failed connect to server

    Issue: When you create an instance, but cannot connect to the VNC Server because of the error messag ...

  5. Rx系列二 | Observer | Observable

    Rx系列二 | Observer | Observable 上节课我们对RX的一些基本概念和使用JAVA代码实现了一个观察者,但是这只是对思路的一个讲解,在我们JAVA中,其实是已经封装好了观察者对象 ...

  6. Spring中配置DataSource的六种方式

    第一种:beans.xml <bean id="dataSource" class="org.apache.commons.dbcp.BasicDataSource ...

  7. Docker新手入门：基本用法

    Docker新手入门:基本用法 1.Docker简介 1.1 第一本Docker书 工作中不断碰到Docker,今天终于算是正式开始学习了.在挑选系统学习Docker以及虚拟化技术的书籍时还碰到了不少 ...

  8. Dynamics CRM2016 Web API之获取查找字段的text及选项集的text

    本篇再来介绍个web api的功能,关于lookup的text这里只是略带,因为有expand,现有的web api就能实现,主要提的是选项集的text,我们通过基本的查询api查出来的字段值只带有v ...

  9. 微信小程序发布

    一.操作步骤 (1)打开[微信开发者工具]->新建一个默认项目->点击[项目]->点击[上传] (2)使用微信小程序公众平台管理员扫描二维码,在手机微信上点击[确认上传] (3)输入 ...

  10. Android获取当前网络状态

    Android获取当前网络状态 效果图 有网络 没有网络 源码 下载地址(Android Studio工程):http://download.csdn.net/detail/q4878802/9052 ...