学习笔记——day33

最新推荐文章于 2022-06-29 23:19:19 发布

陈肉肉

最新推荐文章于 2022-06-29 23:19:19 发布

阅读量120

点赞数

分类专栏：学习笔记

本文链接：https://blog.csdn.net/Katherine_c/article/details/99999158

版权

学习笔记专栏收录该内容

31 篇文章 0 订阅

订阅专栏

一.事件流

事件冒泡

<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

陈肉肉

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
学习笔记——day33

一.事件流事件冒泡<div id="parent" onclick="alert('parent')"> <div id="child" onclick="alert('child');event.stopPropagation();"> <div id="grandChild" onclick="alert('grandChild')">...
复制链接

扫一扫