事件
为什么要使用事件?
平时我们都会遇到各种来自用户操作的事件，比如鼠标事件、表单事件、进度事件、突变事件（DOM节点改变）等等。我认为事件的提出就是为了规范这类行为的。
假如我们要实现这个功能：点击超链接，弹出两个弹框。于是有下面的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件</title>
<script type="text/javascript">
function click1(){
alert("You Click?");
return false;
}
function click2(){
alert("Are you sure?");
return false;
}
</script>
</head>
<body>
<a href="test.html" id="linka">Click Me</a>
<script type="text/javascript">
document.getElementById("linka").onclick=click1;
document.getElementById("linka").onclick=click2;
</script>
</body>
</html>但是我们会发现一个问题——只能弹出第二个弹窗.....
所以为了避免触发交互事件的诸多bug，最好的方式就是使用人家已经规定好的规范，走野路子bug多....调试调到心态爆炸。所以我们可以尝试使用事务做这个效果。
例题
点击超链接，弹出两个弹框
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件</title>
<script type="text/javascript">
function click1(){
alert("You Click?");
return false;
}
function click2(){
alert("Are you sure?");
//标准事件模型——阻止默认操作。不改的话就会默认不跳。
e.preventDefault();
}
</script>
</head>
<body>
<a href="test.html" id="linka">Click Me</a>
<script type="text/javascript">
//添加事件监听器
var linka=document.getElementById("linka");
linka.addEventListener("click",click1); //（没有On的事件名，函数名）
linka.addEventListener("click",click2);
</script>
</body>
</html>
应用案例
用户注册时，如果用户名为空则提示用户并强制用户写用户名。
提交时需要判断以下所有成立：判断密码不为空，判断密码长度8-20，两次密码一致。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户名输入失去焦点时提示</title>
</head>
<body>
<!--div表示自成一行，所以用span提醒更好。from现在不推荐用了，一般用css -->
姓名：<input id="uname"><span id="prompt1"></span><br>
密码:<input id="ps1" type="password"><br>
确认密码:<input id="ps2" type="password"><br>
<input type="submit" onclick="checkPsw()" value="Register">
<script type="text/javascript">
function checkName(){
if(uname.value==""){
//alert("用户名不可为空"); 死循环提示，缺点是一直失去焦点。但是IE内核版本低的不会一直失去焦点。
document.getElementById("prompt1") //提示用户
.innerHTML="<font color='red'>用户名不能为空</font>";
uname.focus(); //强制获取焦点
}
}
function checkPsw(){
var le=psw.value.length;
if(psw.value==""||le<8||le>20){
alert("请正确填写密码！长度为8~20！");
psw.focus();
}else if((psw2.value)!=(psw.value)){
alert("两次密码要一致");
psw.focus();
}
}
var uname=document.getElementById("uname");
uname.addEventListener("blur",checkName); //onblur()焦点事件
var psw=document.getElementById("ps1");
var psw2=document.getElementById("ps2");
</script>
</body>
</html>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
