事件
事件的三大要素
事件绑定对象
指的是,绑定事件和事件处理函数的标签
这个标签有可能不是触发事件的标签
事件类型
绑定的标签的事件类型
鼠标事件 表单事件 键盘事件 触摸事件 特殊事件
事件处理函数
触发事件时执行的程序
一个标签,往往相同的事件类型只能绑定一个事件处理函数
如果要绑定多个事件处理函数,需要使用事件监听语法
鼠标事件
<style>
div{
width: 200px;
height: 200px;
border:1px solid black;
}
span{
border: 1px solid green;
}
</style>
</head>
<body>
<div>我是div
<span>我是span标签</span>
</div>
<script>
// 鼠标事件
// 通过操作鼠标,来触发事件
var oDiv = document.querySelector('div');
// 1,左键单击事件 click
oDiv.onclick = function(){
console.log('触发的是鼠标左键单击事件');
}
// 2,左键双击事件 dblclick
// oDiv.ondblclick = function(){
// console.log('触发的是鼠标左键双击事件');
// }
// 3,右键单击事件 contextmenu
// oDiv.oncontextmenu = function(){
// console.log('触发的是鼠标右键事件');
// }
// 4,鼠标按键按下事件 mousedown
// 当鼠标按下时,触发事件
// 鼠标的点击事件是 两个动作完成的
// 一个是鼠标按下,一个是鼠标抬起
// 如果只有按下动作,只会触发 mousedown
// 抬起时,完成一个完整的点击效果,才会触发 click
// oDiv.onmousedown = function(){
// console.log('鼠标按下了');
// }
// 5,鼠标按键抬起事件 mouseup
// 当鼠标抬起时,触发事件
// oDiv.onmouseup = function(){
// console.log('鼠标抬起来了');
// }
// 总结:
// 1,鼠标点击事件,分为两部分完成
// 鼠标按下 鼠标抬起
// 2,只操作鼠标按下,只会触发鼠标按下事件
// 3,只操作鼠标抬起,只会触发鼠标抬起事件
// 4,两个操作都完成后,才会触发鼠标点击事件
// 5,鼠标按下抬起,不区分左键右键
// 6,鼠标移入事件
// 经过标签边界线的时候触发
// mouseover mouseenter
// 经过子级会触发
oDiv.onmouseover = function(){
console.log('我进来了1111');
}
// 经过子级不触发
oDiv.onmouseenter = function(){
console.log('我进来了2222');
}
// 7,鼠标移出事件
// 经过标签边界线的时候触发
// mouseout mouseleave
// 经过子级会触发
oDiv.onmouseout = function(){
console.log('我出去了1111');
}
// 经过子级不会触发
oDiv.onmouseleave = function(){
console.log('我出去了2222');
}
// 总结:
// 1,鼠标移出,移出事件,只有经过标签边界线时触发
// 在标签内部时,不会触发
// 2,mouseover mouseout
// 经过当前标签边界线时会触发
// 经过子级标签边界线时也会触发
// 3,mouseenter mouseleave
// 只有经过当前标签时会触发
// 经过子级标签时,不会触发
// 8,mousemove 鼠标移动
// 鼠标在标签范围内移动,会触发事件
// 效果类似于 :hover
oDiv.onmousemove = function(){
console.log('我动来动去');
}
</script>
表单事件
<body>
<form action="./01_复习.html">
账号 : <input type="text"><br>
<button>提交</button>
</form>
<script>
// 表单事件
// 与form表单相关的事件
var oIpt = document.querySelector('input');
var oForm = document.querySelector('form');
// 1, focus 标签获取焦点事件
// 所谓的鼠标检点,就是鼠标点击的对象是当前标签
oIpt.onfocus = function(){
console.log('我被点击了,我获取了焦点');
}
// 2, change 标签失去焦点,并且数据改变,触发事件
// 触发事件有两个条件
// 1,标签失去焦点 --- 焦点在其他标签上
// 2,标签的数据,发生改变
oIpt.onchange = function(){
console.log('我失去焦点了,而且我被改变了')
}
// 3, input 标签输入内容时,触发事件
oIpt.oninput = function(){
console.log('我被输入数据了')
}
// 4, submit 表单提交事件
// 绑定给form表单标签
// 可以阻止提交表单
// 多用于,提交数据时,做判断操作
// 如果数据不符合要求,就阻止表单提交
oForm.onsubmit = function(e){
// 阻止表单提交,后面详细讲
e.preventDefault();
window.alert('您输入的数据有误')
}
</script>
from表单
<body>
<form action="./01_复习.html">
注册账号: <input type="text" name="us" placeholder="请你您输入账号,8-16位"><span name="username"></span><br>
注册密码: <input type="password" placeholder="请你您输入密码,8-16位"><br>
重复密码: <input type="password" placeholder="二次输密码,与密码一致"><br>
验 证 码 : <input type="text" placeholder="请你您二次验证码"> <br>
<span name="vc"></span><button type="button" name="reset">看不清刷新</button><br>
<button>提交</button>
</form>
<script>
// 简单的form表单验证demo
// 1,要获取生成,验证码
// 实际项目中,往往是与第三方机构获取验证码
// 目前本地生成一个随机的6位验证码
var str = '0123456789abcdefghijklmnopqrstuvwxyzABCEDEFGHIJKLMNOPQRSTUVWXYZ';
var oVc = document.querySelector('[name="vc"]');
oVc.innerHTML = setVc(str);
var oBtnReset = document.querySelector('[name="reset"]');
oBtnReset.onclick = function(){
oVc.innerHTML = setVc(str);
}
// 2,当标签获取焦点时,给标签后,输入提示信息
// 标签要在不同的事件中获取数据,不能直接获取数据
// 一般是先获取标签对象,然后在事件执行的时候,获取 标签对象.value数据
// 当输入账号标签获取焦点时
var oIptUserName = document.querySelector('[name="us"]');
var oSpanUserName = document.querySelector('[name="username"]');
// 获取焦点,在span标签中输入提示
oIptUserName.onfocus = function(){
oSpanUserName.innerHTML = '请您输入账号,不能为空,长度是8-16位';
oSpanUserName.style.color = 'black';
}
// 输入数据,在span标签中输入提示
oIptUserName.oninput = function(){
// 1,获取input标签数据的数据,length属性就是输入的数据长度
var usernameValue = oIptUserName.value;
oSpanUserName.innerHTML = `您当前输入${usernameValue.length}个字符,最多输入16位字符,您还是可以输入${16-usernameValue.length}个字符`;
oSpanUserName.style.color = 'black';
}
// 当失去焦点时,判断,输入的数据,是否符合规范
// 目前就判断数据的长度是8-16为字符
oIptUserName.onchange = function(){
// 验证数据长度在8-16位之间
var usernameValue = oIptUserName.value;
// 当账号长度在8-16位之间时,输入账号符合规范的提示信息
if( usernameValue.length >= 8 && usernameValue.length <= 16 ){
oSpanUserName.innerHTML = '您输入的账号符合规范';
oSpanUserName.style.color = 'black';
// 当账号长度不在8-16位之间时,输入账号不符合规范的提示信息
}else{
oSpanUserName.innerHTML = '您输入的账号不符合规范';
oSpanUserName.style.color = 'red';
}
}
// 其他输入框的验证,自己补全
// 爱怎么写怎么写,能有提示内容和效果就可以
// 当点击提交按钮时,进行数据验证
// 数据必须符合规范,才能执行提交表单效果
// 否则会阻止表单提交
var oForm = document.querySelector('form');
// 提交事件,要阻止调教,参数必须有一个e
oForm.onsubmit = function(e){
// 1,输入内容不能为空
// 如果输入内容是空字符串,就在对应项输入提示,并且组织表单提交,终止程序
var usernameValue = oIptUserName.value;
// 如果账号数据为空
if( usernameValue === '' ){
// 阻止表单提交
e.preventDefault();
oSpanUserName.innerHTML = '您输入的账号,不能为空';
oSpanUserName.style.color = 'red';
return;
}
// 其他的为空判断,自己来补充完整
// 验证数据长度
if( !( usernameValue.length >= 8 && usernameValue.length <= 16 ) ){
e.preventDefault();
oSpanUserName.innerHTML = '您输入的账号,不符合长度规范,请输入8-16位账号';
oSpanUserName.style.color = 'red';
return;
}
// 其他的长度判断,自己来补充完整
// 密码和二次输入密码,数据必须完全一致
// ===
// 输入的验证码数据,必须与生成的验证码内容,完全一致
// ===
// 如果之前所有的if判断,都没有被执行
// 证明输入的账号,密码符合规范
// 才能正确提交数据
}
function setVc(str) {
var vc = '';
while (vc.length < 6) {
var num = parseInt(Math.random() * str.length);
if (vc.indexOf(str[num]) === -1) {
vc += str[num];
}
}
return vc;
}
</script>
