<!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. 使用gogs搭建git私有仓库

    搭建gogs 我的机器环境:centos 7 1.安装git yum install git   2.安装mysql gogs的数据存在mysql中,需要安装一个mysql来存数据,当然也有其他的选择 ...

  3. OLE：对象的类没有在注册数据库中注册

    我在网上下载了破解版的SAS9.3,用了一段时间之后,今天打开就填出一个提示框:OLE:对象的类没有在注册数据库中注册 激活该对象所需的应用程序不可用.是否用"转换--"将其转换为 ...

  4. python序列化pickle/cPickle

    一.pickle/Cpickle简介 Python序列化的概念很简单.内存里面有一个数据结构,你希望将它保存下来,重用,或者发送给其他人.你会怎么做?这取决于你想要怎么保存,怎么重用,发送给谁.很多游 ...

  5. 剑指架构师系列-Nginx的安装与使用

    Nginx可以干许多事情,在这里我们主要使用Nginx的反向代理与负载均衡功能. 1.Nginx的下载安装 在安装Nginx前需要安装如下软件: GCC  Nginx是C写的,需要用GCC编译 PCR ...

  6. 剑指架构师系列-持续集成之Maven实现项目的编译、发布和部署

    Maven组织项目进行编译.部署 Maven项目基本的结构说明如下: mazhi  // 控制所有荐的编译.部署.发布 mazhi-app-parent  // 项目的父项目,有一些公共的设置可以被子 ...

  7. Docker 数据卷

    数据卷是一个可供一个或多个容器使用的特殊目录,它绕过 UFS,可以提供很多有用的特性: 数据卷可以在容器之间共享和重用 对数据卷的修改会立马生效 对数据卷的更新,不会影响镜像 卷会一直存在,直到没有容 ...

  8. Leetcode难度表及解题汇总

    Leetcode难度表及解题汇总 参考网上一份题目难度表,以及本人的解题. Id Question Difficulty Frequency Data Structures Algorithms Bl ...

  9. 【SSH系列】初识spring+入门demo

    学习过了hibernate,也就是冬天,经过一个冬天的冬眠,当春风吹绿大地,万物复苏,我们迎来了spring,在前面的一系列博文中,小编介绍hibernate的相关知识,接下来的博文中,小编将继续介绍 ...

  10. 在java程序中实现发送邮件的功能

    最近比较忙,在做一个人事管理系统的项目,在这项目需求中,需要一个发送邮件的功能.这个时候我们可以使用javamail的jar包来实现完美需要的功能,在这里简单的分享一个最基础的发邮件功能. 首先我们需 ...