javascript事件编程

javascript事件编程在实际的使用中是比较常见的，本文简单mark一下。主要内容包括：事件处理程序、常用事件、绑定事件方式、事件冒泡、默认行为以及事件对象示例。

1.事件处理程序

事件就是用户或浏览器自身执行的某种动作。比如说click,mouseover，都是事件的名字。而相应某个事件的函数就叫事件处理程序（或事件侦听器）。为事件指定处理程序的方式有好几种，比如行内绑定、动态绑定等。

inlineBinding.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">

    <title>My JSP 'inlineBinding.jsp' starting page</title>

	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
<script type="text/javascript">
//行内绑定
function display(){
	alert("Hello");
	alert("Hello");
	alert("Hello");

}
</script>
  </head>

  <body>
    <input type="button" value="确定" onclick="display()"/>
  </body>
</html>

2.常用的事件

onLoad    ：页面加载完毕后  一般用于body元素

onUnload              ：页面关闭后       一般用于body元素

onBlur           ：失去焦点

onFocus         ：获得焦点

onClick          ：点击

onMouseOver        ：当鼠标经过时

onMouseOut          ：当鼠标离开时

onMouseDown       ：当鼠标按下时

onMouseUp           ：当鼠标抬起时

onMouseMove       ：当鼠标移动时

onChange              ：当内容改变时

onSelect                ：当内容被选中时

onkeypress             ：当键盘点击时

onkeydown            ：当键盘按下时

onkeyup                      ：当键盘抬起时

触发顺序：onkeydown、onkeypress、onkeyup

Onkeypress事件无法捕获功能键    代码见下例

onSubmit                     ：当表单提交时

onReset                 ：当表单重置时

inlineBinding2.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">

    <title>My JSP 'inlineBinding.jsp' starting page</title>

	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
<script type="text/javascript">
//事件处理
function display(text){
	document.getElementById("div").innerHTML+=text;

}
</script>
  </head>

  <body onload="alert('欢迎！')" onunload="alert('再见')">
    <input type="text" onkeypress="display('press')" onkeydown="display('down')" onkeyup="display('up')"/>
    <div id="div"></div>
  </body>
</html>

上面的例子体现了onkeypress、onkeydown和onkeyup的使用方法，实际中常用的是onkeyup。

3.绑定事件的方式

3.1行内绑定

<元素 事件=”事件处理程序”>

<script type="text/javascript">
function show(){
alert('hello world!');
}
</script>
<input type="button" value="click me" onclick="show()"/>

上面也可以称为HTML事件处理程序。

这种方式是目前用得比较多的一种，但是在html中指定事件处理程序有两个缺点。

(1)首先：存在一个时差问题。就本例子来说,假设show()函数是在按钮下方，页面的最底部定义的，如果用户在页面解析show()函数之前就单击了按钮，就会引发错误；

(2)第二个缺点是html与javascript代码紧密耦合。如果要更换时间处理程序，就要改动两个地方：html代码和javascript代码。

因此，许多开发人员摒弃html事件处理程序，转而使用javascript指定事件处理程序。

3.2动态绑定

对象.事件=事件处理程序

dynamicBinding.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">

    <title>My JSP 'inlineBinding.jsp' starting page</title>

	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
<script type="text/javascript">
window.onload=function(){
	//行内绑定和动态绑定的区别
	document.getElementById("btnok").onclick=function(){
		alert("Hello!");
	};
	document.getElementById("div").onclick=test;
};
function test(){
	this.style.color='red';
}
</script>
  </head>

  <body>
    <input type="button" value="确定" id="btnok"/>
    <div id="div" onclick="test()">javascript</div>
  </body>
</html>

3.3行内绑定和动态绑定的区别

简单一句话总结，就是行内绑定调用的函数是全局函数和全局变量，即相当于window.方法名和window.变量名，而动态绑定可以将函数的作用域限定在绑定对象的范围内，即可以使用this来引用绑定的对象，比如上例。

4.事件监听

我们能不能为一个dom对象的同一个事件指定多个事件处理程序

4.1如果为一个对象的同一个事件指定多个事件处理程序，那么，后面指定的程序会覆盖前面的。

dynamicBinding3.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">

    <title>My JSP 'inlineBinding.jsp' starting page</title>

	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
<script type="text/javascript">
window.onload=function(){
	//为对象的某个时间指定多个事件处理，出现问题。关于事件起泡
	document.getElementById("div1").onclick=test1;
	document.getElementById("div1").onclick=test2;
};
function test1(){
	alert("first");
}
function test2(){
	alert("second");
}
</script>
  </head>

  <body>
    <div id="div1">div1</div>
  </body>
</html>

4.2如果我们想为一个对象的某个事件指定多个事件处理，可以考虑使用事件监听。

事件监听语法：

IE：

attachEvent(type,callback)

type：事件名 如：onclick、onsubmit、onchange等

callback：事件处理程序

基于W3C模型：

addEventListener(type,callback,capture)

Type：事件名 ，没有“on”前缀  如：click、submit、change

Callback：事件处理程序

Capture：事件模型 （可选参数）   （冒泡模型、捕捉模型） true：捕捉模型

false：冒泡模型 （默认值）

eventListener.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">

    <title>My JSP 'inlineBinding.jsp' starting page</title>

	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
<script type="text/javascript">
//使用事件监听解决为对象的某个时间指定多个事件处理
//注意IE11已经废除了attachEvent方法，想要看到效果需要在兼容模式下运行程序
//注意此时，会先执行fn2，在执行fn1
//attachEvent只在IE和基于IE内核的浏览器中是有效的
//W3C中是使用addEventListener
function fn1(){
	alert('first');
}
function fn2(){
	alert('second');
}
window.onload=function(){
	//在IE中使用
	//document.getElementById('div1').attachEvent('onclick',fn1);
	//document.getElementById('div1').attachEvent('onclick',fn2);
	//W3C中
	document.getElementById('div1').addEventListener('click',fn1,false);
	document.getElementById('div1').addEventListener('click',fn2,false);
};
</script>
  </head>

  <body>
    <div id="div1">div1</div>
  </body>
</html>

4.3IE和W3C事件监听的不同：

监听方法不同：IE attachEvent 、W3C  addEventListener

监听参数不同：IE 没有模型参数、W3C 有模型参数

触发顺序：IE 8及以下的浏览器触发时是先绑定、后触发

W3C浏览器是先绑定、先触发

事件名称不同：IE 事件需要”on”前缀，W3C不需要’on’前缀

4.4解决浏览器兼容性问题

使用

//解决浏览器的兼容问题
function addEvent(obj,type,callback){
	if(obj.attachEvent){//IE
		obj.attachEvent('on'+type,callback);
	}else{//W3C
		obj.addEventListener(type,callback,false);
	}
}

eventListener2.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">

    <title>My JSP 'inlineBinding.jsp' starting page</title>

	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
<script type="text/javascript">
//解决浏览器的兼容问题
function addEvent(obj,type,callback){
	if(obj.attachEvent){//IE
		obj.attachEvent('on'+type,callback);
	}else{//W3C
		obj.addEventListener(type,callback,false);
	}
}
function fn1(){
	alert('first');
}
function fn2(){
	alert('second');
}
window.onload=function(){
	var obj = document.getElementById('div1');
	addEvent(obj,'click',fn1);
	addEvent(obj,'click',fn2);
};
</script>
  </head>

  <body>
    <div id="div1">div1</div>
  </body>
</html>

5.事件模型

事件模型分为两种：

1）冒泡模型

2）捕捉模型

5.1事件冒泡是指事件响应时会上水冒一样上升至最顶级元素

bubble.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">

    <title>My JSP 'inlineBinding.jsp' starting page</title>

	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
<script type="text/javascript">
//出现了事件起泡问题问题
function fn1(){
	alert('div1');
}
function fn2(){
	alert('div2');
}
function fn3(){
	alert('div3');
}
window.onload=function(){
	document.getElementById("div1").onclick=fn1;
	document.getElementById("div2").onclick=fn2;
	document.getElementById("div3").onclick=fn3;
};
</script>
<style type="text/css">
#div1{width:400px;height: 400px;background: red;}
#div2{width:300px;height: 300px;background: green;}
#div3{width:200px;height: 200px;background: blue;}
</style>
  </head>

  <body>
	<div id="div1">
		<div id="div2">
			<div id="div3"></div>
		</div>
	</div>
</body>
</html>

上面的程序，当点击div3时会同时执行div2和div1的点击事件，即事件冒泡

5.2大多数情况下，程序需要对事件冒泡进行取消

取消事件冒泡：

IE：

window.event.cancelBubble=true;

W3C：

function(event){

event.stopPropagation();

}

bubble2.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">

    <title>My JSP 'inlineBinding.jsp' starting page</title>

	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
<script type="text/javascript">
//大多数情况下，程序需要对事件起泡进行取消
//解决浏览器兼容问题
function stopBubble(event){
	//IE下
	if(window.event){
		window.event.cancelBubble=true;
	}else{//W3C下
		event.stopPropagation();
	}
}
function fn1(){
	alert('div1');
}
function fn2(event){
	alert('div2');
	stopBubble(event);
}
function fn3(){
	alert('div3');
}
window.onload=function(){
	document.getElementById("div1").onclick=fn1;
	document.getElementById("div2").onclick=fn2;
	document.getElementById("div3").onclick=fn3;
};
</script>
<style type="text/css">
#div1{width:400px;height: 400px;background: red;}
#div2{width:300px;height: 300px;background: green;}
#div3{width:200px;height: 200px;background: blue;}
</style>
  </head>

  <body>
	<div id="div1">
		<div id="div2">
			<div id="div3"></div>
		</div>
	</div>
</body>
</html>

上面的程序即取消了点击div2向点击div1的事件冒泡

6.默认行为

有些html元素，有自己的行为，如，提交按钮、超链接

有些时候，我们需要对默认行为进行取消，如表单按钮点击时，用户资料添写不完整，我们这时需要将按钮的默认行为取消。

取消默认行为的方法：

IE：

window.event.returnValue=false;

W3C:

event.preventDefault();

stopDefault.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">

    <title>My JSP 'inlineBinding.jsp' starting page</title>

	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
<script type="text/javascript">
//阻止表单提交的默认行为
//解决浏览器兼容问题
function prevent(event){
	//IE下
	if(window.event){
		window.event.returnValue=false;
	}else{//W3C下
		event.preventDefault();
	}
}
window.onload=function(){
	document.getElementById("submit").onclick=function(event){
		if(document.getElementById("username").value==''){
			prevent(event);
		}
	}
};
</script>
<style type="text/css">
#div1{width:400px;height: 400px;background: red;}
#div2{width:300px;height: 300px;background: green;}
#div3{width:200px;height: 200px;background: blue;}
</style>
  </head>

  <body>
  <form action="index.jsp" method="post">
  <input type="text" id="username"/><br>
  <input type="submit" value="提交" id="submit"/>
  </form>
</body>
</html>

上面实现了当文本框填写为空时，form不会提交。

7.事件对象

事件对象就是事件发生时系统自动产生的对象，这个对象包含了这个事件发生时所有的信息

如：鼠标移动，那么，鼠标所在的横、纵坐标就保存到了这个事件对象中

获得事件对象：

IE9及以上版本、W3C：

function(event){}

IE8及以下：

window.event

useEvent.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">

    <title>My JSP 'inlineBinding.jsp' starting page</title>

	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
<script type="text/javascript">
//通过使用event实现控制div移动
window.onload=function(){
	var content = document.getElementById("content");
	document.getElementById("text").onkeyup=function(event){
		var code;
//解决浏览器兼容问题
		//IE下
		if(window.event){
			code = window.event.keyCode;
		}else{//W3C下
			code = event.keyCode;
		}
		switch(code){
		case 37:
			//alert('left');
			content.style.left = (parseInt(content.style.left)-10)+'px';
			break;
		case 38:
			content.style.top = (parseInt(content.style.top)-10)+'px';
			break;
		case 39:
			content.style.left = (parseInt(content.style.left)+10)+'px';
			break;
		case 40:
			content.style.top = (parseInt(content.style.top)+10)+'px';
			break;

		}
	};
};
</script>
<style type="text/css">
#div1{width:400px;height: 400px;background: red;}
#div2{width:300px;height: 300px;background: green;}
#div3{width:200px;height: 200px;background: blue;}
</style>
  </head>

  <body>
  <input type="text" id="text"/><br>
  <div id="content" style="width: 100px;height: 100px;background: red;position: absolute;left: 10px;top: 10px;">text</div>
</body>
</html>

上面实现了在文本框中移动上、下、左（<-）、右（->）键控制div的移动。

以上即为javascript事件编程的简单介绍，需要在实际的使用过程中仔细体会。

时间： 2024-10-14 00:44:36

javascript事件编程的相关文章

JavaScript 事件 编程练习

编程练习 使用JS完成一个简单的计算器功能.实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除. 提示:获取元素的值设置和获取方法为:例:赋值:document.getElementById(“id”).value = 1: 取值:var = document.getElementById(“id”).value: 任务 第一步: 创建构建运算函数count(). 第二步: 获取两个输入框中的值和获取选择框的值. 提示:document.getElementById( id名

JavaScript异步编程（一） 深入理解JavaScript事件

JavaScript异步编程 深入理解JavaScript事件 ?事件的调度 JavaScript事件处理器在线程空闲之前不会运行 线程的阻塞 var start = new Date(); // setTimeout和setInterval的计时精度比期望值差 setTimeout(function(){ var end = new Date(); console.log('Time elapsed', end - start, 'ms'); }, 500); while(new Date -

Javascript异步编程方法之------“事件监听”

Javascript异步编程方法之------“事件监听”另一种思路是采用事件驱动模式.任务的执行不取决于代码的顺序,而取决于某个事件是否发生.还是以f1和f2为例.首先,为f1绑定一个事件(这里采用的jQuery的写法).f1.on('done', f2);上面这行代码的意思是,当f1发生done事件,就执行f2.然后,对f1进行改写:function f1(){setTimeout(function () {// f1的任务代码f1.trigger('done');}, 1000);}f1.

读javascript高级编程11-事件

一.事件流 事件流指从页面中接收事件的顺序. 1.事件冒泡(常用) IE中采用的事件流是事件冒泡,先从具体的接收元素,然后逐步向上传播到不具体的元素. 2.事件捕获(少用) Netscapte采用事件捕获,先由不具体的元素接收事件,最具体的节点最后才接收到事件. 3.DOM事件流 DOM2级事件包括三个阶段:事件捕获阶段.处于目标阶段和事件冒泡阶段. 二.事件处理程序 事件处理程序就是响应某些事件的函数,如onclick等. 1. DOM0级事件处理程序 每个元素都有自己的事件处理程序属性,如o

JavaScript高级编程随笔

前言: 本人之前在博客园写过一遍关于MVC基础的一个小文章,由于当时各种原因没能继续坚持写下去,最近本人在学习JavaScript,想用自己的方式整理出来,主要是为了加深自己的印象,我还是一个前端的小学生,希望各位前端的前辈多指点.我会吧每一章节学到的看到的整理到我的博客园里,虽然这本书前面讲的很基础,我也会坚持发表文章.好了废话说到这里开始进入正题. Content: 本人现在准备要看的第一本书是<JavaScript高级编程>[第三版],这是一本比较经典的JS书籍,即使前面几章比较简单基础

JavaScript异步编程设计快速响应的网络应用

JavaScript已然成为了多媒体.多任务.多内核网络世界中的一种单线程语言.其利用事件模型处理异步触发任务的行为成就了JavaScript作为开发语言的利器.如何深入理解和掌握JavaScript异步编程变得尤为重要!!!<JavaScript异步编程设计快速响应的网络应用>提供了一些方法和灵感. 一.深入理解JavaScript事件 1. 事件的调度 JavaScript事件处理器在线程空闲之前不会运行(空闲时运行). var start = new Date(); setTimeout

JavaScript DOM编程艺术学习笔记（一）

嗯,经过了一周的时间,今天终于将<JavaScript DOM编程艺术(第2版)>这本书看完了,感觉受益匪浅,我和作者及出版社等等都不认识,无意为他们做广告,不过本书确实值得一看,也值得推荐给想了解HDOM的相关人员!首先非常感谢作者写出了这么好的一本书,谢谢!书中的内容比较多,我仅记下我认为对自己和他人有所帮助的一些内容! 嗯,首先还是让代码来说话吧! 下面是两段此书中反复强调且通用的经典代码段 1:相当的经典和实用,尤其是当需要为页面加载函数绑定多个函数的时候 /** * [addLoad

JavaScript高级编程

原文地址: http://www.onlamp.com/pub/a/onlamp/2007/07/05/writing-advanced-javascript.html Web应用程序(Web Applications)        从计算机纪元的黎明刚刚来临開始,不同平台间软件的互用性就一直是关注的焦点.为了尽可能实现用户的最大要求,软件公布者往往将流行软件从一个机器移植到另外一个机器上,这通常要花费数月的辛苦劳动,有时甚至是整个软件在新的硬件或者操作系统上的全然重写.随着计算机功能的不断强

JavaScript高级编程II

原文地址: http://www.onlamp.com/pub/a/onlamp/2007/08/23/advanced-javascript-ii.html?page=1 在前面的文章中,我们介绍了两类JavaScript小工具及其源代码:浮动文本和弹出菜单.本文中,我们将继续介绍另外几个实用的JavaScript小工具,并着重说明其工作原理,因此你能够简单改动后应用到自己的程序中.本文中的JavaScript代码应该不用做不论什么改动就能够在当前全部主流浏览器上执行.所以,不用再费周折……