一.事件流
事件冒泡
<div id="parent" onclick="alert('parent')">
<div id="child" onclick="alert('child');event.stopPropagation();">
<div id="grandChild" onclick="alert('grandChild')">
stopPropagation(); //阻止事件的冒泡
二.事物的委托
<body>
<div id="container">
<button type="button">button1</button>
<button type="button">button2</button>
<button type="button">button3</button>
<button type="button">button4</button>
<button type="button">button5</button>
<button type="button">button6</button>
<button type="button">button7</button>
<button type="button">button8</button>
<button type="button">button9</button>
<button type="button">button10</button>
</div>
<!--按钮的单击事件,弹出自身的内容-->
<script>
/*1.事件的添加*/
window.onload=function(){
var arr = document.getElementsByTagName("button");
//遍历添加事件
/*for(var i=0;i<arr.length;i++){
//函数,回调,回头再调!!!!!!callback handler
arr[i].onclick=function(){
alert(this.innerHTML);
};
}*/
/*事件委托*/
var container = document.getElementById("container");
container.addEventListener("click",function(e){
console.log(e.target);
alert(e.target.innerHTML);
},false);
}
</script>
</body>
三.表单
<body>
<form name="form1" action="#" method="get" id="f1" onsubmit="return subform3();">
<input type="submit" value="submit" onclick="return submit_form2()"/>
<input type="submit" value="submit2"/>
<input type="button" value="提交button" onclick="submit_form()"/>
<input type="image" src="img/stop.png"/>
</form>
<script>
var form1 = document.getElementById("f1");
console.log(form1);
form1 = document.form1;
console.log(form1);
form1 = document.forms['form1'];
console.log(form1);
form1 = document.forms[0];
console.log(form1);
function submit_form(){
form1.submit();
};
function submit_form2(){
/*//阻止冒泡
event.stopPropagation();
//最值默认行为
event.defaultPrevented();*/
//合并,简称return false
return true;
};
function subform3(){
return false;
};
</script>
</body>
四.表单校验
<body>
<form action="#" method="get">
<input type="text" name="username" id="username"placeholder="请输入用户名" />
<span id="usernametip"></span><br />
<input type="password" name="pwd" id="pwd"placeholder="请输入密码" />
<span id="pwdtip"></span><br />
<input type="button" value="提交" onclick="validate()" />
<script>
/**
* 任务:
* 实现用户名的失去焦点提示是否正确!!!!
*/
function validate(){
var flag = true;
//用户名不少于8位
var username = document.getElementById("username");
if(username.value.length<8){
document.getElementById("usernametip").innerHTML="请输入正确格式的用户名";
document.getElementById("usernametip").className='erro';
flag = false;
}else{
//
}
//密码不能小于6位
var pwd = document.getElementById("pwd");
if(pwd.value.length<6){
document.getElementById("pwdtip").innerHTML="请输入正确格式的密码";
document.getElementById("pwdtip").className='erro';
flag=false;
}else{
document.getElementById("pwdtip").innerHTML="ok";
document.getElementById("pwdtip").className='ok';
}
if(flag){
document.forms[0].submit();
}
};
</script>
</form>
</body>
五.正则
1.特殊字符
–>任意字符 *
–>任意个数 |
–>或 [优先级低] +
–>1 个及以上 ?
–>0或者1 \d
–>数字 \w
–>字母 数字 _ \s
–>任意空白 space tab \r\n