您的位置：首页 > Web前端 > JavaScript

JavaScript——事件处理

2018-03-29 23:11 232 查看

本节目标：
1.掌握javaScript中主要的事件使用

2.掌握javaScript与表单的操作

3.掌握正则表达式在javaScript中的使用

1.onLoad 与onUnload

<html lang="en">
<head>
<script type="text/javascript">
function login(){
alert("欢迎登录！");
}
function logout(){
alert("退出成功！");
}
</script>
</head>
<body onLoad = "login()" onUnload = "logout()">
</body>

</html>

所有的事件都是使用onXXX的形式定义的。以上包含两个简单的事件处理，在页面加载时触发onLoad操作，在页面退出时触发onUnload操作。

2.点击事件-onclick

<html lang="en">
<head>
<script type="text/javascript">
function show(){
alert("hello world!");
}
</script>
</head>
<body>
<h3><a href="#" onclick = "show()">点击一下</a></h3>
</body>

</html>

3.事件处理与表单操作

<head>
<script type="text/javascript">
function show(){
var value = document.myForm.context.value;
alert("输入的内容是：" + value);
}
</script>
</head>
<body>
<form method="post" action="#" name="myForm">
请输入内容：<input type="text" name="context">
<input type="button" value="显示" onclick="show()">
</form>

</body>
如果表单中输入需要满足某些条件？
使用正则完成，在javaScript中正则：/正则/.test(内容)
Onsubmit事件在表单提交时触发。
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript">
function validate(f){
var value = f.email.value;
if(!/^\w+@\w+.\w+$/.test(value)){
alert("输入的格式不正确！");
f.email.focus();// 获得焦点
f.email.select();// 已有的内容全选
return false;
}
return true;
}
</script>
</head>
<body>
<form method="post" action="test.html" name="myForm" onsubmit="return validate(this)">
EMAIL:<input type="text" name="email">
<input type="submit" value="提交">
</form>
</body>

</html>
以上是取得普通文本的内容，以下将取得单选钮和复选框的内容。
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/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 intrs = " " ; //表示兴趣
for(i = 0; i<document.myForm.intrs.length; i++){
if(document.myForm.intrs[i].checked){
intrs += document.myForm.intrs[i].value + "、";
}
}
alert("兴趣：" + intrs);

}
</script>
</head>
<body>
<form method="post" action="test.html" 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="intrs" value="篮球" >篮球
<input type="checkbox" name="intrs" value="网球" >网球
<input type="checkbox" name="intrs" value="乒乓球" >乒乓球
<input type="button" value="显示" onclick="show()">
</form>
</body>

</html>

4.onchange事件

<html lang="en">
<head>
<script type="text/javascript">
function show(f){
document.myForm.result.value=f;
}
</script>
</head>
<body>
<form method="post" action="" name="myForm">
部门：<select name="dept" onchange="show(this.value)">//this表示当前select标签对象，this.value表示选中的值
<option value="销售部">销售部</option>
<option value="技术部">技术部</option>
<option value="财务部">财务部</option>
</select>
结果：<input type="text" name="result" value="">
</form>
</body>

</html>
每一个表单的控件就是一个对象（基于对象）。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航