事件绑定、解绑、类型、对象

事件：就是函数在某种状态下被调用，JS捕捉到的发生在网页上的行为，官方称为事件句柄(handler)，是交互体验的核心功能。

事件的三要素: 1.事件源 2.事件类型 3.事件处理程序。三者缺一不可。

目录

一、事件的绑定和解绑

1.行内式

2.元素属性绑定

 3.同元素多处理程序绑定方式

二、事件类型

1.鼠标事件 

2.键盘事件

3.输入框事件

4.鼠标滚动

5.鼠标点击滑动

6.加载

三、事件对象

1.事件源对象

2.鼠标事件触发

3.键盘事件触发 

---

一、事件的绑定和解绑

1.行内式

标签的属性值是事件触发时执行代码。

<div class="box" onclick="javaScript:console.log(66666)">
			hello
</div>

 解绑：οnclick=null

2.元素属性绑定

兼容性很好，但是一个元素的同一个时间上只能绑定一个处理程序

box.onclick=function(e){}

解绑：box.οnclick=null 

 3.同元素多处理程序绑定方式

IE9以下不兼容，可以为一个事件绑定多个处理程序。给元素添加一个事件监听器

box.addEventListener("click",function(){
 	console.log(999)
 })

 解绑： ele.removeEventListener("click",fn)

二、事件类型

1.鼠标事件：click、dblclick、mousedown、mouseup、mousemove、mouseover、 mouseout、mouseenter(html5标准)、mouseleave(html5标准)

2.键盘事件：keydown、keyup、keypress

(注：keydown和input:前者监听的是键盘,如果换成了软键盘就触发不了，所以用到更多的是input)

3.输入框操作事件：input、focus、blur、change

4.鼠标滚动：wheel

5.鼠标点击滑动：scroll

6.等待加载完毕再执行：load

格式1：

box.addEventListener("click",()=>{

  console.log("111")

  })

格式2：

box.οnclick=function(){

  console.log("111")

 }

1.鼠标事件 

click：鼠标按下和松开时 ，鼠标指针在被选元素区域内部

dbclick：鼠标点两下，鼠标第一次按下和第二次松开时  鼠标指针在被选元素区域内部 并且时间间隔不能太长

mousedown：鼠标在被选元素内按下

mouseup：鼠标在被选元素内松开

mousemove：鼠标在被选元素中移动的时间(与鼠标在内停留的时间长短有关)

mouseover：鼠标进入被选元素

 mouseout：鼠标从被选元素出去

mouseenter：鼠标从被选元素进去

mouseleave：鼠标从被选元素出去

2.键盘事件

keydown：输入框的键盘按下

keyup：输入框的键盘松开

keypress：输入框的键盘按下

3.输入框事件

input：输入框在输入就触发

focus：输入框聚焦时触发

blur：输入框失焦时触发

change：输入框失焦并且改变value值

4.鼠标滚动

wheel：鼠标滚轴滚动时，鼠标指针在被选元素内部

5.鼠标点击滑动

scroll：元素自己的滚动条滚动，单位时间内滚动条的位置发生变化

6.加载

load：加载完毕时执行

三、事件对象

事件触发时，handler函数内部会传入数据，就会触发信息。事件处理函数形参e(event)。

1.事件源对象

event.target    火狐只有这个
event.srcElement    IE6/78只有这个
这两个chrome都有    

兼容性写法：var ele=event.target|| event.srcElement

2.鼠标事件触发

altKey 鼠标事件发生时，是否按下alt键,返回一个布尔
ctrlKey 鼠标事件发生时，是否按下ctrl键,返回一个布尔
metaKey  鼠标事件发生时，是否按下windows/commond键,返回一个布尔
shiftKey 鼠标事件发生时，是否按下shift键,返回一个布尔
pageX  鼠标点击的  X 坐标；(包含body隐藏的)
pageY  鼠标点击的  Y 坐标；(包含body隐藏的)
clientX clientY返回鼠标位置相对于浏览器窗口左上角的坐标，单位为像素(不包括body隐藏的)
screenX screenY返回鼠标位置相对于屏幕左上角的坐标，单位为像素
movementX，movementY返回一个位移值，单位为像素，表示当前位置与上一个mousemove事件之间的距离
offsetX/offsetY 相对于元素自己的x/y 跟它是否是定位的元素无关

3.键盘事件触发 

charCode/keyCode  键码值  key  键码
37左
38上
39右
40下 
13enter