知识点
1、JS支持事件处理业务逻辑模型，常用事件
- Click 单击
- Dblclick 双击
- Focus 聚焦
- Blur 失去焦点
- Mouseover 鼠标悬停
- Mousemove 鼠标移动
- Mouseout 鼠标移开
- Change 改变
- Load 页面加载
- Keydown 键按下
调用
找到对应的标签，加上属性 on事件关键字=”JS代码”。一般调用的JS代码逻辑很复杂，会用函数封装。
- DOM操作：Document Object Model，文档对象模型。网页文档由一个个的HTML标签组成，操作网页组成元素（标签）。
document.getElementById();
document.getElementsByName();
document.getElementsByTagName();
表单提交
方式一：document.getElementById("form1").submit();
方式二：提交按钮类型设置为submit，调用的函数必须要有一个返回值，返回false不提交，true提交；调用函数时前面再加个return 关键字。
- 回车验证的实现。利用用户敲击键盘判断用户按下的是回车键调用检测函数即可。
- 事件参数：event代表对应的标签执行的动作。比如文本框按下键判断是不是回车
Onkeydown=”Test(event);”
<script>
function Test(e){
var e=e||window.event;
if(e.keyCode==13){}
}
</script>
鼠标悬停，显示该位置坐标（相对）
Onmouseover=”alert(event.clientX+”|”+event.clientY);”
表单验证
示例源码：
<html>
<head><title>XXX 用户注册</title></head>
<body style="margin-left:auto; margin-right:auto; text-align:center;">
<form name="form1" id="form1" action="register.php" method="post">
<table align="center">
<caption><h3>用户注册</h3></caption>
<tr><th>用户名：</th><td><input onKeyDown="EnterCheck(event);" name="loginid" id="loginid" placeholder="请输入用户名" /></td></tr>
<tr><th>密码：</th><td><input name="pwd" id="pwd" type="password" placeholder="请输入密码" onKeyDown="EnterCheck(event);" /></td></tr>
<tr><th>确认密码：</th><td><input name="repwd" id="repwd" type="password" placeholder="请输入确认密码" onKeyDown="EnterCheck(event);" /></td></tr>
<tr><th>昵称：</th><td><input type="text" name="uname" id="uname" placeholder="请输入昵称" onKeyDown="EnterCheck(event);" /></td></tr>
<tr><th>性别：</th><td><input type="radio" checked id="sex" name="sex" />男<input name="sex" type="radio" id="sex" />女
</td></tr>
<tr><th>喜欢的颜色：</th><td>
<select name="ucolor" id="ucolor">
<option selected value="0">==请选择==</option>
<option value="red">--红色--</option>
<option value="green">--绿色--</option>
<option value="blue">--蓝色--</option>
</select>
</td></tr>
<tr><th>爱好：</th><td><input value="playcomputer" name="cbof[]" id="cbof[]" type="checkbox">玩电脑
<input type="checkbox" value="readingbook" name="cbof[]" id="cbof[]" >看书
<input type="checkbox" value="dosporting" name="cbof[]" id="cbof[]">做运动
</td></tr>
<tr><th>个人简介：</th><td>
<textarea rows="4" name="describe" id="describe" onKeyDown="EnterCheck(event);"></textarea>
</td></tr>
<tr><td></td><td>
<input type="button" value="提交" onClick="return CheckInput();">
<input type="reset" value="重置">
<input type="button" value="取消">
</td></tr>
</table>
</form>
</body>
<script language="javascript" type="text/javascript">
//验证用户输入
function CheckInput(){
var result=false;
//获取用户名文本框对象
var loginid=document.getElementById("loginid");
var pwd=document.getElementById("pwd");
var repwd=document.getElementById("repwd");
var uname=document.getElementById("uname");
var ucolor=document.getElementById("ucolor");
var describe=document.getElementById("describe");
if(CheckIsSafeInputText(loginid,"用户名")){}
else if(CheckIsSafeInputText(pwd,"密码")){}
else if(repwd.value!=pwd.value){
alert("密码与确认密码不一致");
repwd.focus();
}
else if(CheckIsSafeInputText(uname,"昵称")){}
else if(ucolor.value=="0"){
alert("请至少选择一个喜欢的颜色");
ucolor.focus();
}
else if(describe!=null && describe.value.length>256){
alert("个人简介不得超出256个字符");
describe.focus();
}
else
//document.getElementById("form1").submit();
result=true;
return result;
}
//验证文本框是否合法，非法返回true，合法返回false
function CheckIsSafeInputText(obj,msg){
var result=true;
if(obj==null || obj.value=="")
{
alert(msg+"不得为空");//+为字符串连接符
obj.focus();
}
else if(obj.value.length<4 || obj.value.length>16){
alert(msg+"长度在4~16个字符以内");
obj.focus();
}
else
result=false;
return result;
}
//回车验证
function EnterCheck(e){
var e=e || window.event;
if(e.keyCode==13)
CheckInput();
}
</script>
</html>
JS外链
JS的代码抽出去作为一个单独的文件，命名要对应，相应的页面通过
<script language="javascript" type="text/javascript" src="相对路径"></script>
来调用
本文来自投稿，不代表科技代码立场，如若转载，请注明出处https://www.cwhello.com/3025.html
如有侵犯您的合法权益请发邮件951076433@qq.com联系删除
