事件处理
来源：互联网 发布：mysql 最近3天 编辑：程序博客网 时间：2024/06/05 11:51
1.所有的事件都是以On开头的，这也是事件的一个标准命名。
2.onsubmit事件是一个在表单上编写的事件操作，只要是表单提交都要触发此操作。
3.在JavaScript中如果用户输入的某些数据需要满足某些特定条件，则需要使用正则表达式。/正则/.test(内容)。而且在JavaScript中使用正则的时候最好加上开头“^”和结尾“$”。
4.在使用JavaScript的时候有一个特别重要的内容就是如果多个控件定义了同一个名字的话，则此时将按照数组的形式来操作。例如，选择性别时的情况。
示例代码：
（1）
<html>
<head>
<title>www.baidu.com</title>
<script language="javascript">
function hello(){
alert("欢迎您的光临！");
}
function byebye(){
alert("您要走了？请慢走！");
}
</script>
</head>
<body onLoad="hello()" onUnload="byebye()">
</body>
</html>
（2）
<html>
<head>
<title>www.baidu.com</title>
<script language="javascript">
function fun(){
alert("Hello World！！！");
}
</script>
</head>
<body>
<h3><a href="#" onclick="fun()">按我吧！</a></h3> //使用“#”号代表自己链接自己。
</body>
</html>
（3）
<html>
<head>
<title>www.baidu.com</title>
<script language="javascript">
function show(){
var value = document.myform.name.value; //取得输入的字符串。
alert("输入的内容是：" + value);
}
</script>
</head>
<body>
<form action="" method="post" name="myform">
请输入内容：<input type="text" name="name" >
<input type="button" value="显示" onclick="show()">
</form>
</body>
</html>
用浏览器执行此段代码的输出结果如下：
（4）
<html>
<head>
<title>www.baidu.com</title>
<script language="javascript">
function validate(f){
var value = f.email.value
if(!/^\w+@\w+.\w+$/.test(value)){ //注意正则表达式的格式。
alert("EMAIL输入格式不正确！");
f.email.focus(); //让email获得焦点。
f.email.select(); //让已有的内容全选。
return false;
}
return true;
}
</script>
</head>
<body>
<form action="html.htm" method="post" name="myform" onsubmit="return validate(this)"> //注意验证表单时onsubmit的位置。
EMAIL:<input type="text" name="email">
<input type="submit" value="提交">
</form>
</body>
</html>
其中html.htm页面的内容为：
/******************************************************************************************/
<html>
<head>
<title>www.baidu.com</title>
</head>
<body>
<form action="" method="post">
编 号:<input type="text" name="userid"
value="No."size="2" maxlength="2"><br>
用户名:<input type="text" name="username" value="请输入用户名:"><br>
密 码:<input type="password" name="userpass"
value="请输入密码"><br>
性 别:<input type="radio" name="sex" value="男"
checked>男
<input type="radio" name="sex" value="女">女<br>
部 门:<select name="dept">
<option value="技术部">技术部</option>
<option value="销售部" selected>销售部</option>
<option value="技术部">技术部</option>
</select><br>
兴 趣:<input type="checkbox" name="inst" value="唱歌">唱歌
<input type="checkbox" name="inst" value="游泳">游泳
<input type="checkbox" name="inst" value="跳舞">跳舞
<input type="checkbox" name="inst" value="编程"checked>编程
<input type="checkbox" name="inst" value="上网">上网
<input type="checkbox" name="inst" value="运动">运动
<br>
说 明:<textarea name="note" cols="30" rows="3">清华大学-北京大学计算机科学与技术专 业:www.baidu.com
</textarea>
<br>
<input type="submit" value="提交"><input type="reset" value="重置">
</form>
<body>
</html>
/*******************************************************************************************/
用浏览器执行此段代码的输出结果如下：（验证输入的Email地址的格式是否正确。）
（5）
<html>
<head>
<title>www.baidu.com</title>
<script language="javascript">
function show(){
var name = document.myform.name.value;
alert("姓名: " + name);
var sex; //表示性别
if(document.myform.sex[0].checked){
sex = document.myform.sex[0].value;
}else{
sex = document.myform.sex[1].value;
}
alert("性别: " + sex);
var inst = ""; //复选框的内容也以数组的形式表示。
for(i=0; i<document.myform.inst.length; i++){
if(document.myform.inst[i].checked){
inst += document.myform.inst[i].value + " ";
}
}
alert("兴趣：" + inst);
}
</script>
</head>
<body>
<form action="html.htm" method="post" name="myform">
姓名：<input type="text" name="name"><br>
性别：<input type="radio" name="sex" value="男" checked>男
<input type="radio" name="sex" value="女">女<br>
兴趣：<input type="checkbox" name="inst" value="唱歌">唱歌
<input type="checkbox" name="inst" value="跳舞">跳舞
<input type="checkbox" name="inst" value="游泳">游泳
<input type="checkbox" name="inst" value="编程"checked>编程
<input type="checkbox" name="inst" value="看书">看书
<input type="checkbox" name="inst" value="跑步">跑步<br>
<input type="button" value="显示" onclick="show()">
</form>
</body>
</html>
用浏览器执行此段代码的输出结果如下：
（6）
<html>
<head>
<title>www.baidu.com</title>
<script language="javascript">
function show(val){
alert(val);
document.myform.result.value = val;
}
</script>
</head>
<body>
<form action="html.htm" method="post" name="myform">
部门：<select name="dept" onchange="show(this.value)">
<option value="技术部">技术部
<option value="销售部">销售部
<option value="财务部">财务部
</select>
结果：<input type="text" name="result" value="">
</form>
</body>
</html>
用浏览器执行此段代码的输出结果如下：
- 事件处理
- 事件处理
- 事件处理
- 处理事件
- 事件处理
- 事件处理
- 事件处理
- 事件处理
- 处理事件
- 事件处理
- 事件处理
- 事件处理
- 事件处理
- 事件处理
- 事件处理
- 事件处理
- 事件处理
- 事件处理
- ASP.NET 管理网站（虚拟目录）
- 43 Android fragment 回退栈
- VS2010MFC创建线程
- html5中关于canvas标签用法（绘图）
- （转）理解(Memory Reordering)从JVM并发看CPU内存指令重排序
- 事件处理
- 《轻松搞定网页设计》学习笔记系列之一
- python dict排序之一
- Head First Java_Study Notes_Chapter 1 Break the Surface
- 树莓派学习笔记——I2C设备载入和速率设置
- SDL游戏之路(八)--2D游戏添加3D元素
- python写的简答学生管理系统Demo（练习python语法）
- 五、java面向对象编程(二）——类变量、类方法
- JVM原理和优化
