今天复习下javascript的一些事件,上一节已经说了捕获和冒泡事件,这节主要来看看常见的事件,废话不多说,先截个图看看常见的事件
我写了两个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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>javascript事件</title>
<script language="JavaScript" type="text/javascript">
function textChange(obj){
//alert(obj);
var div=document.getElementById("inputDiv");
var value=obj.value;
div.innerHTML=value;
}
function textChange2(obj){
var div=document.getElementById("inputDiv2");
var value=obj.value;
div.innerHTML=value;
}
</script>
</head>
<body>
onChange事件:<input type="text" id="input1" onchange="textChange(this)"/><div id="inputDiv"></div>
onpropertyChange事件:<input type="text" id="input2" onpropertychange="textChange2(this)"/><div id="inputDiv2"></div>
</body>
</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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>javascript事件2</title>
<script language="JavaScript" type="text/javascript">
function cardOnFocus(obj){
var value=obj.value;
if(value=="请输入格式:10XXXXXX"){
obj.value="";
}
}
function cardOnBlur(obj){
var value=obj.value;
var pattern=/^10\d{6}$/;
var result=pattern.test(value);
if(!result){
alert("您输入的格式错误,重新输入!");
obj.focus();
}else{
alert("格式输入正确!");
}
}
</script>
</head>
<body>
<form>
<h2>卡号:<input type="text" id="inputCard" value="请输入格式:10XXXXXX" onfocus="cardOnFocus(this)" onblur="cardOnBlur(this)" /></h2>
<br />
密码:<input type="password" id="inputPass" value=""/>
</form>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> JavaScript中的事件(下) </TITLE>
<META NAME="Content-Type" CONTENT="text/html;charset=utf-8">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<SCRIPT LANGUAGE="JavaScript">
<!--
function pageOnLoad(){
var xDiv=document.getElementById("positionX");
var yDiv=document.getElementById("positionY");
function documentMouseMove(ev){
ev=ev||window.event;
if(navigator.userAgent.indexOf("Firefox")!=-1){
if(ev.pageX||ev.pageY){
xDiv.innerHTML="<font color='red'>"+ev.pageX+"</font>";
yDiv.innerHTML="<font color='red'>"+ev.pageY+"</font>";
}
}else{
var x=ev.clientX+document.body.scrollLeft-document.body.clientLeft;
var y=ev.clientY+document.body.scrollTop-document.body.clientTop;
xDiv.innerHTML="<font color='red'>"+x+"</font>";
yDiv.innerHTML="<font color='red'>"+y+"</font>";
}
}
document.onmousemove=documentMouseMove;
}
//-->
</SCRIPT>
</HEAD>
<BODY onload="pageOnLoad()">
X:<div id="positionX"></div>
Y:<div id="positionY"></div>
</BODY>
</HTML>
- 大小: 75.9 KB
- 大小: 32.6 KB
分享到:
相关推荐
JavaScript基础语法(ppt)JavaScript基础语法(ppt)JavaScript基础语法(ppt)JavaScript基础语法(ppt)JavaScript基础语法(ppt)JavaScript基础语法(ppt)JavaScript基础语法(ppt)JavaScript基础语法(ppt)...
JavaScript基础三天总结
( JavaScript基础教程(中文第8版.pdf ) js 入门绝佳教程
javascript 基础 教程 入门 精通 javascript 基础 教程 入门 精通 javascript 基础 教程 入门 精通 javascript 基础 教程 入门 精通 javascript 基础 教程 入门 精通 javascript 基础 教程 入门 精通 javascript ...
javascript的基础知识,快速入门,了解js的技术点,快速上手
JavaScript教程(pdf版)JavaScript基础教程(pdf版)
javascript基础资料
这是一个最全的js基本事件及实例
JAVASCRIPT基础手册 JAVASCRIPT基础手册
javascript基础教程(第8版) javascript基础教程(第8版) 高清版
javascript基础知识总结,详细的介绍了基础知识
JavaScript基础教程 javascript源码大全1.0版本 js网页小技巧 网络编程基础版之javascript
javascript教案 JavaScript基础 【实例简介】javascript教案 javascript学习指导,语法基础的指导及编写格式和方法的说明 第一章 概述 4 1.1 JavaScript的由来 4 1.2 什么是JavaScript 4 1.3 JavaScript的特点...
JavaScript基础,pdf文件JavaScript基础,pdf文JavaScript基础,pdf文JavaScript基础,pdf文JavaScript基础,pdf文
头歌教学实践平台 Web前端开发基础 JavaScript学习手册十:正则表达式。源码txt格式。
JavaScript上机实验题 涉及一些javascript的应用 试题也比较适中
该课件适合于JavaScript入门,深入浅出、浅显易懂 压缩包里有四个PPT文件,分别为 1、JavaScript基础.ppt 2、JavaScript核心对象.ppt 3、JavaScript浏览器对象.ppt 4、JavaScript表单处理.ppt
《JavaScript基础教程(第8版)》循序渐进地讲述了JavaScript及相关的CSS、DOM、Ajax、jQuery等技术。书中从JavaScript语言基础开始,分别讨论了图像、框架、浏览器窗口、表单、正则表达式、用户事件和cookie,并在上...
JavaScript基础知识例子.zipJavaScript基础知识例子.zip
对JavaScript语言基础知识点的总结,整理出十张思维导图