javascipt监听事件

来源：互联网发布：电气专业软件编辑：程序博客网时间：2024/06/06 17:42

三种事件绑定方式：

内嵌式：是在input标签的onclick属性里写入点击方法；（注意在内嵌式中this(当前点击的对象)不能直接传“若不传递this则是window对象”，所以如果要用必须写标签的onclick=a(this,event)属性）

外联式：DOM0标准: 在js中写入代码obj.getElementById(event).onclick=function (匿名){this...}；
DOM2标准(可以绑定多个事件)：在js中写入代码obj.getElementById(event).addEventLisener("click获取鼠标行为",function(匿名){this..},"执行流设置")

执行流：定义；当多个click事件的标签嵌套在一起时的执行先后顺序；
-内嵌式和外链式默认是冒泡（若当前元素的父元素绑定了事件，当前事件被触发时父类便签也会被触发，则是从内层到外层的顺序一次执行便签的事件），无法修改执行流（只有DOM2标准可以修改为"捕获式"从外向内）

关键字：执行流、是否可以绑定多个事件、方法入参（this和event对象）、匿名方法事件、

阻止流：

阻止form的sibmit默认提交行为：.preventDefault;
stopccrent：阻止当前标签中相同行为（及相同标签）
stop：阻止执行流里标签的相同行为（及本级标签）

窗口行为属性：

load(窗口打开时) ,unload（窗口关闭时）,resize(body的尺寸发生改变时),
focusout（onblur）失去焦点 focusin得到焦点

前台验证代码：

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script></script>
<style>
table {
margin: 100px auto;
border: 1px solid lightgray;
font-family: "华文新魏";
font-size: 20px;
box-shadow: 2px 2px 5px #d3c998;
border-radius: 30px;
/*border-collapse: collapse;*/
}

table .bt{
text-align: right;
width: 200px;
height: 50px;
padding-right: 20px;
border-right: 1px solid lightgray;
}

table td {
border-bottom: 1px solid lightgray;
}

table tr:last-child td{
border-bottom: hidden;
text-align: center;
width: 800px;
}

table input.srk,select {
height: 25px;
width: 200px;
font-size: 20px;
}

table input.srk:focus {
background-color: #c6f5ff;
}

table button,#ptan{
font-size: 20px;
margin: 2px 20px;
border-radius: 5px;
background-color: #2ffdff;
}

table button:hover,#ptan:hover {
background-color: #3ad5ff;
}

</style>

<script>
//输入错误提示
function mycreat(object,value){
var sp=document.createElement("span");
sp.innerHTML=value;
object.parentNode.appendChild(sp);
}
//获取多选按钮选中的个数
function mymath(name){
var tags=document.getElementsByName(name);
var count=0;
for(var i=0;i<tags.length;i++){
if(tags[i].checked){
count++;
}
}
// alert(count);
return count;
}

//字符匹配
function myreg(object,valeu){
if(object.type=="text"&&(valeu.test(object.value))) return true;
if(object.type=="password"&&(valeu.test(object.value))&&quela(object,"psw")) return true;
return false;
}

//两个节点值是否相等
function quela(object,id){
var i2=document.getElementById(id);
return object.value=i2.value;
}

//input用户密码
function myonblur_text(obj){
if(obj.nextElementSibling!=null)obj.parentNode.removeChild(obj.nextElementSibling);

var reg=/\w{6,18}/;
if(myreg(obj,reg)){
mycreat(obj,"正确")
}else{
if(obj.type=="password"){
// mymath_text(obj.parentNode.id,"两个密码不对或者密码格式不错");
mycreat(obj,"两个密码不对或者密码格式不错");
return false;
}
mycreat(obj,"格式错误(只能是6~18字符)");
return false;
}
}
//输入错误提示
function mymath_text(id,value){
document.getElementById(id);
var sp=document.querySelector("#"+id+" span");
if(sp==null){
var mysp=document.createElement("span");
mysp.style.color="red"
mysp.innerHTML=value;
document.querySelector("#"+id).appendChild(mysp);
return;
}
sp.innerHTML=value;
}
//submit提交事件
function mysubmit(e){
var loo=true;
var reg=/\w{6,18}/;
var user=myreg(document.getElementById("username"),reg);
var pass=myreg(document.getElementById("psw1"),reg);
if(!user)loo=false;
if(!pass)loo=false;
if(mymath("sex")==0) {
loo=false;
mymath_text("mul1","请选择你的性别");
}
if(mymath("hobby")==0) {
loo=false;
mymath_text("mul2","请选择你的爱好");
}
if(document.getElementById("zwjs").value==""){
loo=false;
mymath_text("td-zwjs","个人介绍没有填写");
}
if(loo==false){
e.preventDefault();
alert("提交数据失败，请查看格式是否正确")
}else{ alert("提交数据成功")}
}
</script>
</head>
<body>
<form action="1 review.html" method="post" >
<table>
<tr>
<td class="bt"><label for="username">用户名</label></td>
<td id="td-ur"><input type="text" name="username" id="username" class="srk" onblur="myonblur_text(this,event)"
value="zhangsan"
tabindex="1" accesskey="q"/> </td>
</tr>
<tr>
<td class="bt"><label for="psw">密码</label></td>
<td><input type="password" name="psw" id="psw" class="srk" tabindex="2" onclick="mymath_text()"/> </td>
</tr>
<tr>
<td class="bt" id="td-pass"><label for="psw1">确认密码</label></td>
<td><input type="password" name="psw1" id="psw1" class="srk" tabindex="3" onblur="myonblur_text(this,event)"/> </td>
</tr>
<tr>
<td class="bt">性别</td>
<td id="mul1">
<input type="radio" name="sex" id="male" value="male" /><label for="male" tabindex="4" >男</label>
<input type="radio" name="sex" id="female" value="female" /><label for="female">女</label>
</td>
</tr>
<tr>
<td class="bt">爱好</td>
<td id="mul2">
<input type="checkbox" name="hobby" id="nan" value="nan" /><label for="nan">男</label>
<input type="checkbox" name="hobby" id="nv" value="nv"/><label for="nv">女</label>
</td>
</tr>
<tr>
<td class="bt"><label for="xz">薪资水平</label></td>
<td>
<select name="xz" id="xz">
<option value="0">请选择</option>
<option value="1" selected>1000-3000</option>
<option value="2">3000-6000</option>
<option value="3">6000-10000</option>
<option value="4">10000以上</option>
</select>
</td>
</tr>
<tr>
<td class="bt" id="jianjies"><label for="zwjs" >自我介绍</label></td>
<td id="td-zwjs">
<textarea name="zwjs" id="zwjs" cols="30" rows="10"></textarea>
</td>
</tr>
<tr>
<td colspan="2" >

<button type="submit" id="tj" onclick="mysubmit(event)">提交</button>
<button type="reset" id="cz">重置</button>


</td>
</tr>
</table>
</form>
</body>
</html>

0 0