昨日回顾
事件对象event
主要目的：主要获取事件发生时的环境信息，比如说：坐标。
事件对象的存在：当事件发生时，事件对象event就存在了。
<h1 onClick=“get_xy(event,name,value)”></h1>
注意：event对象参数是固定，不能加引号；
事件发生时，可以根据函数的功能，传递多个参数。
如果使用元素对象的事件属性，则不能传递多个参数。
<div id=“box”></div>
<script>
//先获取到id=box的对象
Var obj = document.getElementById(“h1”);
//给id=box的对象绑定一个onclick事件
obj.onclick = get_xy //JS中的事件句柄属性必须全小写
//定义函数get_xy()
function get_xy(event)
{
……
}
</script>
事件发生时，将向调用函数，传递一个参数，这个参数就是event对象。
客户端脚本：JavaScript、VBScript、ActionScript
常用事件：
onselect：当选择时
event对象在DOM浏览器和IE浏览器下是有差别的
（1）引入方式的不同
DOM浏览器：事件发生时，调用处理函数，会向处理函数传递一个event对象。
IE浏览器：event对象是window对象的一个属性(子对象)，比如说 location、screen、navigator、 event等
window.location.href 省略window对象后 location.href
window.event.clinetX 省略window对象后 event.clientX
<div id=“box” onClick=“get_xy()”></div>
<script>
function get_xy()
{
Var str = “窗口的坐标：x=”+ window.event.clientX
}
</script>
（2）event对象的属性名称可能不一样
form对象
主要功能：表单验证、二级联动菜单、全选
<form>标记，对应的对象就是form对象。
获取一个HTML元素对象的方法：
（1）用document.getElementById()方法
（2）用parentNode.getElementsByTagName()方法
（3）通过name属性，一般用于表单中
Form对象的属性
Name：表单的名称
Id：对应于id属性
Class：对应于<form>标记的class属性
Action：表单的处理程序，一般是php文件，比如：action=“login.php”
Method：表单的提交方式，取值：GET和POST
Enctype：表单数据的加密类型，取值：application/x-www-form-urlencoded、multipart/form-data
Form对象的事件
onsubmit：当表单提交时（单击提交按钮后，在数据发往处理程序前发生）
onreset：当表单重置时(用的非常少)
form对象的方法
form.submit()
form.reset()
实例：form对象的属性
事件返回值：onsubmit和onclick，它们的返回值，会影响到默认动作的执行。返回true或什么也不返回，默认动作执行；返回false时，则默认动作被阻止。
<script>
//定义函数：在<form>下方插入一个<div>，<div>中显示信息
function init()
{
//取得name=form1的对象
var theForm = document.form1;
theForm.method = "post"; //给method属性赋值
theForm.action = "login.php"; //给 action属性赋值
theForm.onsubmit = checkForm; //将函数地址传递给onsubmit事件
//创建一个<div>的标记
var obj = document.createElement("div");
//构建<div>标记中的内容
var str = "<h4>form对象的相关信息</h4>";
str += "表单的提交方式："+theForm.method;
str += "<br>表单处理程序："+theForm.action;
str += "<br>数据的加密方式："+theForm.enctype;
//将字符串str的内容，写入到div对象中
obj.innerHTML = str;
//将div对象追加到form后面
document.body.appendChild(obj); //将div元素追加到body元素的最后
}
function checkForm()
{
//获取name=form1的对象
var theForm = document.form1;
//条件判断
if(theForm.username.value == "")
{
window.alert("用户名不能为空");
return false;
}else if(theForm.password.value.length == 0)
{
window.alert("密码不能为空");
return false;
}else
{
window.alert("表单验证通过");
return true;
}
}
</script>
</head>
<body onload="init()">
<form name="form1">
用户名：<input type="text" name="username" />
密码：<input type="password" name="password" />
<input type="submit" value="提交表单" />
</form>
单行文本框和密码框
<input type=“text”name=“username” />
<input type=“password”name=“password” />
常用的属性
Type：文本框的类型
Name：元素的名称
Value：取得文本框的值
Size：文本框的长度
maxLength：最大字符数
……
常用方法
select()：选中文本的方法
focus()：获得元素的焦点
blur()：让元素失去焦点
常用的事件
onselect：当文本被选中时
onfocus：当获得焦点时，也就是光标定位到文本框中
onblur：当失去焦点时，也就是光标离开文本框时
本文来自投稿，不代表科技代码立场，如若转载，请注明出处https://www.cwhello.com/464.html
如有侵犯您的合法权益请发邮件951076433@qq.com联系删除
