DOM——事件

一、概念：

事件：

• 函数在某种状态(事件触发时)下被调用，JS捕捉到的发生在网页上的行为，称为事件句柄

事件的三要素：

• 事件源
• 事件类型
• 事件处理程序(handler)

二、事件的绑定方式：

 1、行内绑定：

• 在标签行内的事件值上写上标志"javaScript:js代码"

<button onclick="console.log('你触发了事件')">点击</button>
<a href="javaScript:alert('你触发了事件')">点击->弹窗</a>
<style>
  .div{
    width: 200px;
    height: 200px;
    background-color: palegreen;
 }
</style>
<div class="div" onclick="fn();fn1()">绑定多个函数</div>
<script>
  function fn(){
       console.log("1")
  }
  function fn1(){
       console.log("2")
  }
</script>

2、元素属性绑定：

• 只能绑定一个处理程序 el.onxxx=function(event){}

<div class="box">haha</div>
<script>
var box = document.querySelector(".box")
box.onclick = function() {
	console.log("元素属性绑定")
}
</script>

3、给元素添加一个事件监听器：

• el.addEventListener(type,fn,false) 尽量使用这种方式

<div class="box">haha</div>
<script>
var box=document.querySelector(".box")
box.addEventListener("click",function(){  
		console.log("no haha")
},false)    //第三个参数表示是否捕获阶段触发，当第三个参数设置为true时则在捕捉的时候执行事件
</script>

三、事件的解绑方式

 1、行内和属性绑定的事件解绑

• el.οnclick=false/''/null

<div class="box">haha</div>
<script>
var box=document.querySelector(".box")
box.onclick=function(){
       box.onclick=null;
       console.log("只能打一次") 
}
</script>

  2、事件监听器的解绑：移除对应的元素的对应监听程序

•  el.removeEventListener(type,fn,false)

<div class="box">haha</div>
<script>
var box=document.querySelector(".box")
function fn1 () {
   console.log("1")
 }
function fn2 () {
   console.log("2")
}
box.addEventListener("click",fn1)
box.addEventListener("click",fn2)
box.removeEventListener("click",fn1)
</script>

四、事件的类型

 1、鼠标事件

• click  

<style>
.box {
	width: 300px;
	height: 300px;
	background-color:pink;
	cursor: pointer;
}
</style>
<div class="box">haha</div>
<script>
var box=document.querySelector(".box")
box.addEventListener("click",()=>{
		console.log("鼠标按下和松开时 鼠标指针在被选元素区域内部")
})
</script>

• dblclick

box.addEventListener("dblclick",()=>{
	console.log("双击鼠标时 鼠标指针在被选元素区域内部 并且两次点击时间间隔不能太长")
})

•   mousedown：鼠标按下一次就只触发一次

box.addEventListener("mousedown",()=>{
		console.log("鼠标在被选元素内按下")
})

•   mouseup

box.addEventListener("mouseup",()=>{
	 console.log("鼠标在被选元素内松开")
})

• mouseover

box.addEventListener("mouseover",()=>{
		console.log("鼠标进入被选元素")
})

• mousemove  

box.addEventListener("mousemove",()=>{
				console.log("鼠标在被选元素内移动")
			})

• mouseleave

box.addEventListener("mouseleave",()=>{
		   console.log("鼠标从被选元素出去")
})

•  mouseenter

box.addEventListener("mouseenter",()=>{
			console.log("鼠标从被选元素进去")
})

• mouseout   

box.addEventListener("mouseout",()=>{
		console.log("鼠标从被选元素出去")
})

  2、键盘事件

• keydown

box.addEventListener("keydown",function(){
			console.log("键盘按下")
})

• keyup

box.addEventListener("keyup",function(){
	console.log("键盘松开")
})

• keypress

box.addEventListener("keypress",function(){
		console.log("键盘按下")
})

keydown和 keypress的区别：

• keydown可以响应任意按键(除了Fn键)   常用于绑定操作类事件处理
• keypress只可以响应字符类键盘按键（event.charCode）返回 ASCII码 常用于绑定字符类事件处理  

  3、输入框事件

• input：监听 input框在聚焦状态下的文本变化

box.addEventListener("input",function(){
        console.log("输入框在输入时就触发")
})

• focus：只在聚焦的一刻触发一次

box.addEventListener("focus",function(){
        console.log("输入框获取焦时触发")
})

• blur：只在失焦的一刻触发一次

box.addEventListener("blur",function(){
      console.log("输入框失焦时触发")
 })

• change：监听 input框在失焦后的文本变化

box.addEventListener("change",function(){
  console.log("输入框失焦且value改变")
})

4、其他事件

• onwheel：鼠标的轮滑动时

box.onwheel=function(){
		console.log("鼠标滚轴滚动时 鼠标指针在被选元素内部")
}

• onscroll：常用于绑定在window对象上,滚动鼠标时触发

window.onscroll=function(){
	console.log("元素自己的滚动条滚动  单位时间内滚动条的位置发生变化")
})

• onload：等待网页资源下载完毕再执行

window.onload=function(){
	console.log("浏览器加载完毕后执行:5大BOM的功能加载完成")
}

五、事件的对象

事件对象上存储着事件发生时的相关信息(handler函数内部传入数据)

1、鼠标事件触发时

• altKey 鼠标事件发生时  是否按下alt键  返回一个布尔值

• ctrlKey 鼠标事件发生时  是否按下ctrl键  返回一个布尔值

• metaKey  鼠标事件发生时  是否按下windows/commond键  返回一个布尔值

• shiftKey 鼠标事件发生时  是否按下shift键  返回一个布尔值

• pageX  pageY 鼠标点击的X Y坐标(包含body隐藏的)

var box=document.querySelector(".box")
box.addEventListener("click",function(e){
		console.log(e.pageX,e.pageY)
}) 

• clientX clientY 返回鼠标位置相对于浏览器窗口左上角的坐标  单位为像素(不包括body隐藏的)

var box=document.querySelector(".box")
box.onmousemove=function(e){
	    console.log(e.clientX,e.clientY)
}

• screenX  screenY  返回鼠标位置相对于屏幕左上角的坐标  单位为像素

var box=document.querySelector(".box")
box.onmousemove=function(e){
		console.log(e.screenX,e.screenY)
}

• movementX  movementY  返回一个位移值  单位为像素  表示当前位置与上一个

var box=document.querySelector(".box")
box.onmousemove=function(e){
		console.log(e.movementX,e.movementY)
}

• mousemove 事件之间的距离（改变量）

• offsetX/offsetY  相对于元素自己的x/y 跟它是否是定位的元素无关

var box=document.querySelector(".box")
box.addEventListener("click",function(e){
			console.log(e.offsetX,e.offsetY)
}) 

2、键盘事件触发时

box.onkeydown=function(e){ 
console.log(e,e.keyCode,e.target.value) //可查看触发的键的相关信息如：keyCode、target等
}

六、事件中的this

1.行内:

<button id="btn" onclick="fn(this)">haha</button>
<script>
function fn(e){
     console.log(e,this)  //<button id="btn" onclick="fn(this)">haha</button>,window
}   
//行内绑定时  行内的环境对象是button 
</script>

2.元素属性: this指向的是dom元素本身 事件对象是形参

<button id="btn">haha</button>
<script>
var btn=document.querySelector("#btn")
btn.onclick=function(e){
		console.log(e,this)  //事件对象PointerEvent,<button id="btn">haha</button>
}
</script>

3.addEventListener: this指向的是dom元素本身 事件对象是形参

<button id="btn">haha</button>
<script>
var btn=document.querySelector("#btn") 
btn.addEventListener("click",function(e){
	console.log(e,this)  //事件对象PointerEvent,<button id="btn">haha</button>
 })
</script>

七、盒子模型

el.offsetWidth：本身宽度+边框线+左右内边距

el.offsetHeight：本身高度+边框线+上下内边距

el.clientWidth：本身的宽度+左右内边距

el.clientHeight：本身的高度+上下内边距

el.offsetTop：相对第一个父级节点有定位属性的上偏移量

el.offsetLeft：相对有定位属性的父节点左偏移量

el.clientTop：上边框线的宽度

el.clientLeft：左边框线的宽度

el.scrollWidth：盒子的实际宽度(包括滚动条不可见部分，不包括边线)

el.scrollHeight：盒子的实际高度(包括滚动条不可见部分，不包括边线)

el.scrollTop：滚动条向下滚动的距离

el.scrollLeft：滚动条向右滚动的距离

window.innerHeight：浏览器窗口可见区域高度

window.innerWidth：浏览器窗口可见区域宽度

clientTop：元素上边框的厚度，当没有指定边框厚底时，一般为0

scrollTop：位于对象最顶端和窗口中可见内容的最顶端之间的距离即滚动后被隐藏的高度

offsetTop：对象相对于由offsetParent属性指定的父坐标(css定位的元素或body元素)距离顶端的高度

offsetHeight：对象相对于由offsetParent属性指定的父坐标(css定位的元素或body元素)的高度

• IE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框
• FF 认为 offsetHeight 是网页内容实际高度，可以小于 clientHeight
• 在新版本的FF和IE中是一样的 表示网页的高度 与滚动条无关 chrome中不包括滚动条

scrollHeight：IE、Opera 认为 scrollHeight 是网页内容实际高度 可以小于 clientHeight

                        FF 认为 scrollHeight 是网页内容高度，不过最小值是 clientHeight

clientHeight：内容可视区域的高度即页面浏览器中可以看到内容的这个区域的高度 

                        一般是最后一个工具条以下到状态栏以上的这个区域 与页面内容无关

clientX、clientY：相对于浏览器窗口可视区域的X，Y坐标（窗口坐标）

                               可视区域不包括工具栏和滚动条

pageX、pageY：类似于event.clientX、event.clientY，但使用的是文档坐标而非窗口坐标  

offsetX、offsetY：相对于事件源元素（target或srcElement）的X,Y坐标

                                只有IE事件有这2个属性，标准事件没有对应的属性

screenX、screenY：相对于用户显示器屏幕左上角的X,Y坐标