事件event对象
当事件发生时,会向调用函数传递一个event对象,event对象记录当前事件发生时的环境信息。
一个事件只能对应一个event对象,并且event对象是短暂存在的。
DOM中的event对象的使用方法
1、在HTML标记中,通过事件来调用函数,向函数传递一个event参数,该参数就是一个event对象,这个event必须全小写。注意:这个event参数是固定的
<img id="img01" src="images/01.jpg"οnclick="get_xy(event)" />
function get_xy(e) //这个地方的 e 是一个形参,只要符合变量的命名规则即可
{
alert(e); //打印测试一下event对象
}
2、使用元素对象来传递event对象
<imgid="img01" src="images/01.jpg" />
//以下是JS代码
var obj =document.getElementById(“img01”);
obj.onclick = get_xy; //将函数地址传递事件,不能带括号,也不能带参数
function get_xy(e) //虽然上一行无法给函数传递参数,但事件发生时,事件对象event已经传递过来了
{
alert(e);
}
DOM中event对象的属性
clientX:获取当前事件距离窗口左边的距离;
clientY:当前事件发生时距离窗口顶端的距离;
pageX:当前事件所在网页中的x坐标
pageY:当前事件所在网页中的y坐标;
screenX:当前事件所在屏幕中的x坐标;
screenY:当前事件所在屏幕中的y坐标;
type:当前事件的类型
……
<bodystyle="padding-top:500px;">
<imgid="img01" style="width:500px;"src="images/01.jpg" />
</body>
</html>
<scripttype="text/javascript">
//取得id=img01的对象
var obj =document.getElementById("img01");
//给obj绑定一个onclick事件,调用一个函数get_xy()
obj.onclick = get_xy; //是函数传地址,不加括号,也不能带参数
//定义函数
function get_xy(e)
{
var str = "窗口坐标:"+e.clientX+","+e.clientY;
str += "\n网页坐标:"+e.pageX+","+e.pageY;
str += "\n屏幕坐标:"+e.screenX+","+e.screenY;
str += "\n事件类型:"+e.type;
alert(str);
}
</script>
IE中的event对象的使用
在IE中event是window对象的一个属性,它的使用,应该是:window.event或event
同一时间,event对象只能有一个。
IE中事件发生时,不需要向调用函数传递event参数,也不用接收参数,但在函数中可以使用window.event。
(1)元素对象绑定事件
<imgid="img01" style="width:500px;"src="images/01.jpg" />
//以下是JS代码
var obj =document.getElementById(“img01”);
obj.onclick = get_xy; //将函数地址传递事件,不能带括号,也不能带参数
function get_xy() //Event对象,在IE中不需要传递,也不需要接收
{
alert(event.clientX);
}
(2)HTML标记的事件
<imgid="img01" style="width:500px;"src="images/01.jpg" οnclick=”get_xy()” />
function get_xy() //Event对象,在IE中不需要传递,也不需要接收
{
alert(event.clientX);
}
IE中event对象的属性
clientX、clientY:窗口坐标
screenX、screenY:屏幕坐标
x、y:窗口坐标
offsetX、offsetY:相对当前目标对象的坐标,比如:单击图片时,距离图片顶端和左端坐标
type:事件类型
//创建图片节点
var node_img = document.createElement("img");
//给图片节点添加src属性
node_img.src = "images/xingxing.gif";
node_img.style.position = "absolute";
//图片随机坐标值和大小随机
var width = getRandom(15,80);
//取得event对象的窗口的坐标值
var x = e ? e.clientX : event.clientX;
var y = e ? e.clientY : event.clientY;
//设置相关定位属性
node_img.style.left = (x-width/2)+"px";
node_img.style.top = (y-width/2)+"px";
node_img.style.width = width+"px";
//将图片节点追加到body
document.body.appendChild(node_img);
每个元素对象都有一个className的属性,对应于HTML标记的class属性
<div class=”box” id=”obj”></div>
obj.className = “box”;
综合实例:选项卡切换
function showMe(id)
{
//将四个id存到一个数组中
var arr =["history","family","culture","novel"];
//循环数组,将数组中的字符串转成对象
for(var i=0;i<arr.length;i++)
{
//如果传递过来的id值与数组中的下标一样,说明是当前选项卡
if(arr[i]==arr[id])
{
// arr[3]—— arr[3]
//如果是当前选项卡,则更改其类名为book_type_out
document.getElementById(arr[i]).className ="book_type_out";
//如果是当前的内容层,则更改其类名为book_show
document.getElementById("book_"+arr[i]).className= "book_show";
}else
{
//如果不是当前选择卡,则更改其类名为book_type
document.getElementById(arr[i]).className ="book_type";
//如果不是当前的内容层,则更改其类名为book_none;
document.getElementById("book_"+arr[i]).className= "book_none";
// book_ arr[0] history ——book_history
// book_ arr[1] family ——book_family
}
}
}
form对象
<form name=“form1” action=“login.php” method=“post”></form>
form对象的属性
name:表单名称
method:提交方式,有get和post
action:处理程序
enctype:表单数据的加密方式
……
Form对象的方法:
submit():表单提交方式
reset():重置表单
form对象的事件
onsubmit:当点击“提交按钮”时发生,onsubmit事件发生的时机,是在单击“提交按钮”之后和数据发往服务前
onreset:重置事件
表单提交的三种方法
(1)submit按钮结合onsubmit事件,实现表单提交(最常用)
<script type="text/javascript">
function checkForm()
{
vartheForm = document.form1;
if(theForm.username.value=="")
{
window.alert("用户名不能为空");
return false;
}elseif(theForm.userpwd.value.length==0)
{
window.alert("密码不能为空");
return false;
}else
{
window.alert("验证通过");
return true;
}
}
</script>
</head>
<body>
<form name="form1"method="get" action="login.php" onsubmit="returncheckForm()">
用户名:<inputtype="text" name="username" />
密码:<inputtype="password" name="userpwd" />
<input type="submit" value="提交表单" />
</form>
(2)submit按钮结合onclick事件,实现表单提交
函数定义跟上面一样……
<form name="form1"method="get" action="login.php">
用户名:<inputtype="text" name="username" />
密码:<inputtype="password" name="userpwd" />
<input type="submit"value="提交表单" onclick="returncheckForm()" />
</form>
(3)button按钮结合submit()方法,实现表单提交
<script type="text/javascript">
function checkForm()
{
vartheForm = document.form1;
if(theForm.username.value=="")
{
window.alert("用户名不能为空");
}elseif(theForm.userpwd.value.length==0)
{
window.alert("密码不能为空");
}else
{
window.alert("验证通过");
theForm.submit(); //提交表单的方法
}
}
</script>
</head>
<body>
<form name="form1"method="get" action="login.php">
用户名:<inputtype="text" name="username" />
密码:<inputtype="password" name="userpwd" />
<input type="button"value="提交表单" onclick="checkForm()" />
</form>
提交信息
onsubmit和onclick事件:它们的返回值,会影响默认动作的执行。
submit按钮的默认动作就是提交表单;
<a>超级链接的默认动作,就是打开一个外部链接;
当事件返回false时,表单才会阻止提交,其它的返回值,表单都会提交。
单行文本框、单行密码框、表单验证的方法
一、常用的属性
Name:元素的名称
Value:元素的值
Size:文本框的宽度
Maxlength:最多存放多少个字符
Readonly:只读
Disabled:禁用
……
二、常用的事件
Onfocus:当获得焦点时;
Onblur:当失去焦点时;
三、常用方法
Select():选中内容
Focus():定位光标
Blur():让光标从某个元素上移走
四、表单验证的原理及方法(代码看文件)
复选框:全选和反选
复选框:checkbox对象
常用的属性
name:名称
value:值
checked:选中与否,选中返回true,未选返回false
注意:多个同名的name,则产生一个数组
下拉列表:二级联动菜单
Select对象的常用属性
options[]:返回所有option组成的一个数组;
name:名称
value:option的value的值
length:设置或读取option的个数
selectedIndex:当前选中的option的索引号
……
option对象的常用属性
text:指<option></option>中的文本
value:指option对象的value属性
index:指每个option对象的索引号
selected:当前option是否选中
……