事件--事件类型

盒子基本代码

		<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("输入框获取焦时触发")
})