事件类型：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" value="你好你好你好">
<script>
let _input=document.querySelector('input')
//聚焦
_input.onfocus=function(){
if(_input.value=="你好你好你好"){
_input.value=''
}
}
//失去焦点
_input.onblur=function(){
if(_input.value==""){
_input.value='你好你好你好'
}
}
//value值改变失去焦点才会触发
_input.onchange=function(){
console.log(_input.value)
}
//表单输入实时触发
_input.oninput=function(){
console.log(_input.value)
}
</script>
</body>
</html>聚焦：
当光标点击输入框时将清空里面的内容：
javascript
_input.onfocus=function(){
if(_input.value=="你好你好你好"){
_input.value=''
}失去焦点：
当光标离开输入框就会显示原有的内容：
javascript
_input.onblur=function(){
if(_input.value==""){
_input.value='你好你好你好'
}
}当用户输入内容并且失去焦点时将会触发：
javascript
_input.onchange=function(){
console.log(_input.value)
}表单实时触发：
在输入框中输入什么控制台就会输出什么：
javascript
_input.oninput=function(){
console.log(_input.value)
}表单验证：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<form action="">
<div>用户名：<input type="text" name="username" placeholder="手机号">
<span class="usererr"></span>
</div>
<div>密码：<input type="text" name="pwd" placeholder="大小写">
<span class="pwderr"></span>
</div>
<div><input type="submit" value="注册"></div>
</form>
</div>
<script>
let phone_reg=/^\d{11}$/;
let pwd_reg=/^\d{11}$/
let _username=document.querySelector('input[name=username]')
let _usererr=document.querySelector('.usererr')
let _pwd=document.querySelector('input[name=pwd]')
let _pwderr=document.querySelector('.pwderr')
let _form=document.querySelector('form')
_username.onblur = function() {
checkuser()
}
_pwd.onblur = function() {
checkpwd()
}
//验证用户名
function checkuser(){
//每次验证之前先清空提示
_usererr.innerHTML=''
//非空验证
if(_username.value==""){
_usererr.innerHTML='用户名不能为空'
return false
}
//格式验证
if(!phone_reg.test(_username.value)){
_usererr.innerHTML='格式不正确'
return false
}
return true
}
//验证密码
function checkpwd(){
//每次验证之前先清空提示
_pwderr.innerHTML=''
//非空验证
if(_pwd.value==""){
_pwderr.innerHTML='密码不能为空'
return false
}
//格式验证
if(!pwd_reg.test(_pwd.value)){
_pwderr.innerHTML='格式不正确'
return false
}
return true
}
//表单提交事件
_form.onsubmit = function() {
//return checkuser()&&checkpwd()
//如果用户名没有填写或不正确光标聚焦到用户输入框
if(!checkuser()){
_username.focus()
return false
}
//如果密码没有填写或不正确光标聚焦到密码输入框
if(!checkpwd()){
_pwd.focus()
return false
}
return true
}
</script>
</body>
</html>先设置用户名和密码的样式这里都用11位数字代替：
javascript
let phone_reg=/^\d{11}$/;
let pwd_reg=/^\d{11}$/用户名验证：
首先把用户输入框清空，当用户输入为空时将会提示'用户名不能为空'，格式不正确时也会提示格式不正确：
javascript
function checkuser(){
_usererr.innerHTML=''
if(_username.value==""){
_usererr.innerHTML='用户名不能为空'
return false
}
if(!phone_reg.test(_username.value)){
_usererr.innerHTML='格式不正确'
return false
}
return true
}密码验证也是一样的：
javascript
function checkpwd(){
//每次验证之前先清空提示
_pwderr.innerHTML=''
//非空验证
if(_pwd.value==""){
_pwderr.innerHTML='密码不能为空'
return false
}
//格式验证
if(!pwd_reg.test(_pwd.value)){
_pwderr.innerHTML='格式不正确'
return false
}
return true
}如果用户名或密码没有填写光标将自动聚焦到输入框上：
在函数运行前需要先调用函数：
javascript
_username.onblur = function() {
checkuser()
}
_pwd.onblur = function() {
checkpwd()
}
javascript
_form.onsubmit = function() {
//return checkuser()&&checkpwd()
if(!checkuser()){
_username.focus()
return false
}
if(!checkpwd()){
_pwd.focus()
return false
}
return true鼠标事件：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button>点击</button>
<script>
//双击事件
let _btn=document.querySelector('button');
_btn.ondblclick=function(){
console.log('双击')
}
//悬浮事件
_btn.onmouseenter=function(){
console.log('鼠标悬浮')
}
//离开事件
_btn.onmouseout=function(){
console.log('鼠标离开')
}
//移动事件
_btn.onmousemove=function(){
console.log('鼠标移动')
}
//摁下事件
_btn.onmousedown=function(){
console.log('鼠标摁下')
}
//弹起事件
_btn.onmouseup=function(){
console.log('鼠标弹起')
}
</script>
</body>
</html>双击鼠标控制台就会打印：
javascript
let _btn=document.querySelector('button');
_btn.ondblclick=function(){
console.log('双击')
}当鼠标悬浮在按钮上就会打印：
javascript
_btn.onmouseenter=function(){
console.log('鼠标悬浮')
}鼠标离开事件：
javascript
_btn.onmouseout=function(){
console.log('鼠标离开')
}鼠标移动事件：
javascript
_btn.onmousemove=function(){
console.log('鼠标移动')
}鼠标按下事件：
javascript
_btn.onmousedown=function(){
console.log('鼠标摁下')
}鼠标弹起事件：
javascript
_btn.onmouseup=function(){
console.log('鼠标弹起')
}鼠标跟随效果：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script> function randomColor(){
let a=parseInt(Math.random()*256);
let b=parseInt(Math.random()*256);
let c=parseInt(Math.random()*256);
return `rgb(${a},${b},${c})`
}
document.onmousemove=function (event){
//获取鼠标坐标
let dx=event.pageX;
let dy=event.pageY;
//构造一个圆
let _div=document.createElement("div");
let num=parseInt(Math.random()*10+50);
_div.style.width=num+'px';
_div.style.height=num+'px';
_div.style.background=randomColor()
_div.style.borderRadius='50%'
//圆的位置跟随鼠标移动
_div.style.position='absolute';
_div.style.left=(dx-num/2)+'px';
_div.style.top=(dy-num/2)+'px';
//追加
document.body.append(_div);
//延迟删除
setTimeout(function(){
_div.remove();
},500)
}
</script>
</body>
</html>获取鼠标点击时的坐标：
javascript
let dx=event.pageX;
let dy=event.pageY;构造一个圆形：
javascript
let _div=document.createElement("div");
let num=parseInt(Math.random()*10+50);
_div.style.width=num+'px';
_div.style.height=num+'px';
_div.style.background=randomColor()
_div.style.borderRadius='50%'圆的背景颜色：
javascript
function randomColor(){
let a=parseInt(Math.random()*256);
let b=parseInt(Math.random()*256);
let c=parseInt(Math.random()*256);
return `rgb(${a},${b},${c})`
}给圆加一个绝对定位，左边和顶部的距离都是x,y轴到圆边距的距离
javascript
_div.style.position='absolute';
_div.style.left=(dx-num/2)+'px';
_div.style.top=(dy-num/2)+'px';把div追加到body里面：
javascript
document.body.append(_div);延迟删除：
javascript
setTimeout(function(){
_div.remove();
},500)位置：
html
<!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>
.app {
width: 300px;
height: 300px;
background-color: #ac9090;
position: relative;
overflow: auto;
}
.first{
width: 200px;
height: 200px;
background-color: red;
margin-left: 50px;
}
.second{
width: 200px;
height: 200px;
margin-left: 50px;
background-color: #2c0b0e;
}
</style>
</head>
<body>
<div class="app">
<div class="first"></div>
<div class="second"></div>
</div>
<script>
/**
* 位置:一个元素在某个文档的坐标(和滚动条无关)
* offsetTop:相对于最近的已经定位祖先元素的偏移量
* 如果祖先元素没有定位，相对于浏览器
*/
let _app=document.querySelector('.app')
let _first=document.querySelector('.first')
let _second=document.querySelector('.second')
console.log(_app.offsetLeft,_app.offsetTop)
console.log(_first.offsetLeft,_first.offsetTop)
console.log(_second.offsetLeft,_second.offsetTop)
</script>
</body>
</html>因为app没有祖先元素所以是相对浏览器的偏移量：左边和顶部都是8
javascript
console.log(_app.offsetLeft,_app.offsetTop)因为first的祖先是app所以相对app的左边距离是50，而顶部距离为0：
javascript
console.log(_first.offsetLeft,_first.offsetTop)second的是在first的下面所以它定义的宽度与first相同但是距离app的高度是first的高度：
javascript
console.log(_second.offsetLeft,_second.offsetTop)放大镜：
html
<!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>
/* 原图: 720*720
大图与小图比例=大放大镜与小大镜比例
*/
.app{
display: flex;
}
.app>div{
width:360px;
height:360px;
margin-right: 50px;
}
.left{
border: 1px solid black;
position: relative;
}
.left img{
width: 360px;
}
.right{
border: 1px solid rgb(86, 88, 192);
overflow: hidden;
position: relative;
}
.right>img{
position: absolute;
}
.mark{
width:138px ;
height:138px;
background-color:white;
opacity: 0.5;
position: absolute;
left:0;
top:0;
}
</style>
</head>
<body>
<div class="app">
<div class="left">
<div>
<img src="./洗手台.jpg" alt="">
</div>
<div class="mark"></div>
</div>
<div class="right">
<img src="./洗手台.jpg" alt="">
</div>
</div>
<script>
let _left=document.querySelector('.left');
let _mark=document.querySelector('.mark');
let _img=document.querySelector('.right>img');
//进入显示放大镜
_left.onmouseenter=function(){
_mark.style.display='block';
}
//离开隐藏放大镜
_left.onmouseleave=function(){
_mark.style.display='none';
}
_left.onmousemove=function(event){
//计算放大镜坐标
let dx=event.pageX-_left.offsetLeft-_mark.offsetWidth/2;
//到左边
if (dx<=0){
dx=0
}
//到右边
if (dx>=_left.clientWidth-_mark.offsetWidth){
dx=_left.clientWidth-_mark.offsetWidth
}
let dy=event.pageY-_left.offsetTop-_mark.offsetHeight/2;
//到上边
if (dy<=0){
dy=0
}
//到下边
if (dy>=_left.clientHeight-_mark.offsetHeight){
dy=_left.clientHeight-_mark.offsetHeight
}
_mark.style.left=dx+'px';
_mark.style.top=dy+'px';
_img.style.left=-dx*2+'px';
_img.style.top=-dy*2+'px';
}
</script>
</body>
</html>鼠标进入图片时显示放大镜：
javascript
_left.onmouseenter=function(){
_mark.style.display='block';
}鼠标离开图片时放大镜隐藏：
javascript
_left.onmouseleave=function(){
_mark.style.display='none';
}计算到左边和到右边的距离，让放大镜不会脱离图片：
javascript
let dx=event.pageX-_left.offsetLeft-_mark.offsetWidth/2;
if (dx<=0){
dx=0
}
if (dx>=_left.clientWidth-_mark.offsetWidth){
dx=_left.clientWidth-_mark.offsetWidth
}上面和下面也是一样：
javascript
if (dy<=0){
dy=0
}
//到下边
if (dy>=_left.clientHeight-_mark.offsetHeight){
dy=_left.clientHeight-_mark.offsetHeight
}-
_mark.style.left = dx + 'px'-
设置
_mark元素的水平位置（left）为变量dx的值加上单位px。 -
dx应为数值类型，表示像素偏移量。
-
-
_mark.style.top = dy + 'px'-
设置
_mark元素的垂直位置（top）为变量dy的值加上单位px。 -
dy应为数值类型，表示像素偏移量。
-
-
_img.style.left = -dx * 2 + 'px'-
设置
_img元素的水平位置（left）为-dx * 2的值加上单位px。 -
负值表示向左移动，且移动距离是
dx的两倍。
-
-
_img.style.top = -dy * 2 + 'px'-
设置
_img元素的垂直位置（top）为-dy * 2的值加上单位px。 -
负值表示向上移动，且移动距离是
dy的两倍。
-
javascript
_mark.style.left=dx+'px';
_mark.style.top=dy+'px';
_img.style.left=-dx*2+'px';
_img.style.top=-dy*2+'px';鼠标拖拽：
- 拖拽开始时绑定
onmousemove事件 - 拖拽结束时通过
onmouseup解除移动监听 - 防止鼠标松开后元素继续跟随鼠标移动
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.app{
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div class="app">
</div>
<script>
let _app=document.querySelector('.app')
_app.onmousedown=function(event) {
//计算鼠标在app的坐标
let dx=event.pageX - _app.offsetLeft;
let dy=event.pageY - _app.offsetTop;
_app.onmousemove=function(event) {
_app.style.position = 'absolute';
_app.style.left=event.pageX-dx + 'px';
_app.style.top=event.pageY-dy + 'px';
}
_app.onmouseup=function() {
_app.onmousemove = null;
}
}
</script>
</body>
</html>计算鼠标的坐标：
javascript
let dx=event.pageX - _app.offsetLeft;
let dy=event.pageY - _app.offsetTop;元素通过position: absolute定位，根据鼠标移动事件更新left和top样式属性。event.pageX和event.pageY获取鼠标当前页面坐标。
javascript
_app.onmousemove=function(event) {
_app.style.position = 'absolute';
_app.style.left=event.pageX-dx + 'px';
_app.style.top=event.pageY-dy + 'px';
}- 当在
_app元素上触发mouseup事件时，会将onmousemove事件处理器设为null，从而解除之前绑定的鼠标移动事件监听。
javascript
_app.onmouseup=function() {
_app.onmousemove = null;
}