事件注册、事件派发、事件代理、表单验证、留言板
作业标题:0713作业
作业内容:
- 实例演示事件注册,事件派发,事件代理。
- 将课堂上的表单验证与留言板功能全部按自己方式重写一遍。
实例演示事件注册,事件派发,事件代理。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>事件监听器</title>
</head>
<body>
<!-- 事件监听器 -->
<button>监听器</button>
<button>点击广告</button>
<script>
const btn3 = document.querySelector("button:first-of-type");
// 事件注册
//btn3.addEventListener(事件类型,事件回调方法名,是否冒泡false)
btn3.addEventListener("click", function () {
alert("aaa");
});
btn3.addEventListener("click", show);
function show() {
alert("bbb");
}
//如果事件方法使用了回调,则无法移除
btn3.removeEventListener("click", show);
//事件派发
const myClick = new Event("click");
const btn4 = document.querySelector("button:nth-of-type(2)");
//将自定义的事件派发给指定的元素,自动击发
// btn4.dispatchEvent(myClick);
//自定义点击行为
let i = 0;
btn4.addEventListener("click", () => {
console.log("点击广告,已经赚了:" + i + "元");
i += 0.2;
});
//开户一个间歇式的定时器
setInterval(() => btn4.dispatchEvent(myClick), 3000);
//事件代理
const items = document.querySelectorAll("li");
document.querySelector("ul").onclick = (ev) => {
// 事件绑定者
console.log(ev.currentTarget);
//事件触发者(用户正在点击的事件主体)
console.log(ev.target.textContent);
};
</script>
</body>
</html>
表单验证与留言板
表单验证
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>表单事件</title>
<style>
@import url(style1.css);
</style>
</head>
<body>
<!-- <form action="check.php" method="POST" id="login" onsubmit="return false"> -->
<form action="check.php" method="POST" id="login">
<label class="title">用户登录</label>
<label for="email">邮箱:</label>
<input type="email" id="email" name="email" value="" autofocus />
<label for="password">密码:</label>
<input type="password" id="password" name="password" />
<!-- <button name="submit" type="submit">登录</button> -->
<button name="submit">登录</button>
</form>
<script>
const login = document.forms.login;
//login.onsubmit = () => console.log("提交了");
//禁用元素的默认行为
// login.onsubmit = (ev) => ev.preventDefault();
//login.控制的name属性就可以
login.submit.onclick = (ev) => {
//禁用默认提交行为
ev.preventDefault();
// 禁用冒泡
ev.stopPropagation();
//非空验证
isEmpty(ev.currentTarget.form);
};
function isEmpty(form) {
console.log(form.email.value.length);
console.log(form.password.value.length);
if (form.email.value.lentgh === 0) {
alert("邮箱不能为空");
form.email.focus();
return false;
} else if (form.password.value.length === 0) {
alert("密码不能为空");
form.password.focus();
return false;
} else {
alert("验证通过");
}
}
//login.email.oninput = (ev) => console.log(ev.target.value);
//login.email.onchange = (ev) => console.log(ev.target.value);
//submit:提交
//focus:焦点
//input:用户输入内容时发生
//blur:失去焦点触发
//change:值发生变化
</script>
</body>
</html>
留言板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>留言板</title>
<link rel="stylesheet" href="style2.css">
</head>
<body>
<form class="comment" id="comment">
<label for="content">请留言:</label>
<textarea name="content" id="content" cols="30" rows="5"" placeholder="不要超过100个字符"></textarea>
<button class="submit" type="button" name="submit">提交</button>
</form>
<ul class="list">
</ul>
<script>
const comment=document.forms.comment;
const content=comment.content;
const btn=comment.submit;
const list=document.querySelector('.list');
//console.log(comment,content,btn,list);
btn.onclick=ev=>{
let value=content.value.trim();
if(value.length>0 && value.length<=100){
//表示有内容,将用户插入到列表中
const li=document.createElement('li');
li.textContent=value;
li.style.borderBottom='1px solid white';
li.style.minHeight='3em'
const delBtn=document.createElement('button');
delBtn.textContent='删除留言';
delBtn.style.float='right';
delBtn.classList.add('del-btn');
delBtn.onclick=function(){
if (confirm('是否删除')){
//true:删除
this.parentNode.remove();
alert('删除成功');
content.focus();
return false;
}
}
li.append(delBtn);
list.prepend(li)
alert('留言成功');
content.value=null;
content.focus();
}else{
alert('没有输入或超出长度');
content.focus();
return false;
}
}
</script>
</body>
</html>