盒子基本代码
<style>
.box {
width: 400px;
height: 300px;
background-color: brown;
cursor: pointer;
overflow-y: scroll;
}
.son{
width: 200px;
height: 400px;
background-color: palegreen;
cursor: pointer;
margin: 20px;
}
/* .son:hover{} */
</style>
<div class='box'>
<div class="son">
</div>
</div>
一、鼠标与元素
1.鼠标按下和松开时 鼠标指针在被选元素区域内部
var box=document.querySelector(".box")
box.addEventListener("click",()=>{
console.log("鼠标按下和松开时 鼠标指针在被选元素区域内部")
})
2.鼠标第一次按下和第二次松开时 鼠标指针在被选元素区域内部 并且时间间隔不能太长
var box=document.querySelector(".box")
box.addEventListener("dblclick",()=>{
console.log("鼠标第一次按下和第二次松开时 鼠标指针在被选元素区域内部 并且时间间隔不能太长")
})
3.鼠标在被选元素内按下
var box=document.querySelector(".box")
box.addEventListener("mousedown",()=>{
console.log("鼠标在被选元素内按下")
})
4.鼠标在被选元素内松开
var box=document.querySelector(".box")
box.addEventListener("mouseup",()=>{
console.log("鼠标在被选元素内松开")
})
5.鼠标进入被选元素
var box=document.querySelector(".box")
box.addEventListener("mouseover",()=>{
console.log("鼠标进入被选元素")
})
6.鼠标从被选元素出去
var box=document.querySelector(".box")
box.addEventListener("mouseout",()=>{
console.log("鼠标从被选元素出去")
})
7.鼠标从被选元素出去(与6一样)
var box=document.querySelector(".box")
box.addEventListener("mouseleave",()=>{
console.log("鼠标从被选元素出去")
})
8.鼠标从被选元素进去
var box=document.querySelector(".box")
box.addEventListener("mouseenter",()=>{
console.log("鼠标从被选元素进去")
})
9.鼠标滚轴转动时,鼠标指针在被选元素内部
var box=document.querySelector(".box")
box.onwheel=function(){
console.log("鼠标滚轴滚动时 鼠标指针在被选元素内部")
}
10.元素自己的滚动条滚动了;单位时间内滚动条的位置发生变化
var box=document.querySelector(".box")
box.addEventListener("scroll",function(){
console.log("元素自己的滚动条滚动啦:单位时间内滚动条的位置发生变化")
})
二、键盘与元素
基本元素代码
<input type="text" id="box2" autofocus>
1.输入框的键盘按下
var box2=document.querySelector("#box2")
box2.addEventListener("keydown",function(){
console.log("输入框的键盘按下")
})
2.输入框的键盘松开
var box=document.querySelector(".box")
box2.addEventListener("keyup",function(){
console.log("输入框的键盘松开")
})
3.输入框的键盘按下
var box2=document.querySelector("#box2")
box2.addEventListener("keypress",function(){
console.log("输入框的键盘按下")
})
4.输入框在输入时就触发
var box2=document.querySelector("#box2")
box2.addEventListener("input",function(){
console.log("输入框在输入就触发")
})
5.输入框失焦并且value改变(改变输入框内容且从选中到未选中时触发)
var box2=document.querySelector("#box2")
box2.addEventListener("change",function(){
console.log("输入框失焦并且value改变")
})
6.输入框获取焦时触发(也就是输入框从未选中到选中时触发)
var box2=document.querySelector("#box2")
box2.focus()
box2.addEventListener("focus",function(){
console.log("输入框获取焦时触发")
})
7.输入框获取焦时触发(也就是输入框从选中到未选中时触发)
var box2=document.querySelector("#box2")
box2.focus()
box2.addEventListener("focus",function(){
console.log("输入框获取焦时触发")
})