一、鼠标移动事件
1.鼠标移入 mouseover
2.鼠标移出 mouseout
3.鼠标移动 mousemove
二、表单事件
1、获取焦点 focus
2、失去焦点 blur
3、内容发送改变 change
三、键盘事件
1、按下 keypress
2、按下 keydown
注意:keypress 和keydown有区别 看下面上课的笔记
3、弹起 keyup
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box{
width: 200px;
height: 100px;
background-color: pink;
margin: 50px auto;
}
</style>
</head>
<body>
<div id="box">盒子</div>
<form action="javascript:;">
<input type="text" id="userName" name="user">用户名
<select name="" id="">
<option value="">选项一</option>
<option value="">选项二</option>
</select>
<button type="submit">提交</button>
</form>
<div id="box2" style="height: 200px; width: 200px; overflow: scroll; background-color: pink;">
滚动事件
<div style="height: 300px;border: red solid 1px ;"></div>
</div>
<button id="btn">回到头部</button>
<script>
var box1=document.getElementById('box');
//1 鼠标事件
//1.1 鼠标移入
box1.addEventListener('mouseover',function(e){
console.log("鼠标移入");
box1.style.backgroundColor='green'
})
//1.2鼠标移出
box1.addEventListener('mouseout',function(e){
console.log("鼠标移出");
box1.style.backgroundColor='pink'
})
//1.3鼠标移动
box1.addEventListener('mousemove',function(e){
console.log("鼠标移动");
})
// 2 页面事件 当页面元素加载完毕之后 在执行函数内的代码块
window.onload = function(){
//页面已经加载完毕
}
//3、表单事件
//获取焦点
var form=document.querySelector("#userName");
form.addEventListener('focus',function(e){
console.log("获取焦点");
})
//失去焦点
var form1=document.querySelector("#userName");
form1.addEventListener('blur',function(e){
console.log("失去焦点");
})
//注意 要内容发生改变才会改变
//内容发送改变
var form2=document.querySelector("#userName");
form2.addEventListener('change',function(e){
console.log("内容发送改变");
})
//菜单内容发送改变
var select=document.querySelector("select");
select.addEventListener('change',function(e){
console.log("内容发送改变");
})
document.querySelector("button").addEventListener('click',function(e){
//阻止默认事件
e.preventDefault();
console.log("获取用户信息",document.querySelector("#userName").value);
var userName=document.querySelector("#userName").value;
if(userName== ''){
alert('用户名不能为空');
}
})
//表单提交事件
document.querySelector("form").οnsubmit=function(e){
//阻止默认事件
e.preventDefault();
var formBox=document.querySelector("form");
console.dir(formBox);
//获取value的两种方式
console.log(formBox[0].value,this[0].value);
}
//4、 滚动事件
document.querySelector("#box2").οnscrοll=function(){
console.log('滚动')
//滚动条距离左侧的移动位置
console.log(this.scrollLeft);
//滚动条距离头部的移动位置
console.log(this.scrollTop);
}
document.querySelector('#btn').οnclick=function(){
//回到头部 注意要看 滚动条设置在哪个元素
document.querySelector("#box2").scrollTop=0;
}
//5、键盘事件
var userBox= document.querySelector('#userName');
userBox.addEventListener('keypress',function(e){
//ketpress:按下 监听除功能键 (shift/箭头等)除外的按键按下有效果
// e.keycode 获取当前按下的按键Ascll码值 并且区分大小写
console.log('press 键盘按键按下',e.keycode);
})
userBox.addEventListener('keydown',function(e){
//keydown:按下 监听所有按键按下都能呗监听到 但是它的keycode不区分大小写
// e.keycode 获取当前按下的按键Ascll码值 返回的都是大写字母的ascll码值
console.log('press 键盘按键按下',e.keycode);
})
//keyup:弹起 所有按键按下都能被监听到
//注意 keycode不区分大小写 返回小写字母的ascll码值
userBox.addEventListener('keyup',function(e){
console.log('keyup 键盘按键弹起',e.keycode);
})
</script>
</body>
</html>