JS的事件监听

事件

鼠标事件

click 鼠标单击

dblclick 鼠标双击

mouseover 鼠标经过触发

mouseout 鼠标离开触发

mousemove 鼠标移动触发

mouseup 鼠标弹起触发

mousedown 鼠标按下触发(任何一个键)

mouseenter 鼠标移入

mouseleave 鼠标移出

mousewheel 滚轮事件

contextmenu 右键（配合方法preventDefault()实现右键菜单不显示）

注：mouseenter/mouseleave不会触发冒泡,mouseover/mouseout经过自身和子盒子都会触发

selectstart 鼠标选中（配合方法实现禁止鼠标选中）

键盘事件

keyup 某个键盘按键被松开时触发

keydown 某个键盘按键被按下时触发

keypress 某个键盘按键被按下时触发

注：
onkeypress不识别功能键，比如左右箭头，shift

三个事件的执行顺序 keydown - keypress - keyup

触摸事件

touchstart 触摸开始

touchmove 触摸移动

touchend 触摸结束

表单事件

focus 获得鼠标焦点触发

blur 失去焦点触发

change 改变

input 输入内容改变（input和textarea有效）

submit 提交

reset 重置

监听事件

transitionend 监听过渡完成事件

注册事件

1.传统方式on开头的事件

element.οnclick=function(){}

注：注册事件有唯一性
同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数会覆盖前面注册的处理函数

行内使用on注册要加()调用<button onclick="fn()"></button>

2.eventTarget.addEventListener(type,listener[,useCapture])事件监听

eventTarget.addEventListener()方法将指定的监听器注册到目标对象上，当该对象触发指定的事件，就会执行事件处理函数

type：事件类型字符串 比如click、mouseover,不能带on

listener：事件处理函数，事件发生时，会调用该监听函数（调用函数不需要加小括号，可以为匿名函数,如果要删除事件则不能使用匿名函数）

useCapture：可选参数，是一个布尔值，默认是false

    为true时DOM事件流处于捕获阶段，从document > html > body >div… 执行
    为false时DOM事件流处于冒泡阶段，从…div>body>html>document 执行

注：同一个元素同一个事件可以添加多个侦听器（事件处理程序）

3. eventTarget.attachEvent(eventNameWithOn,callback)事件监听(ie9兼容)

eventTarget.attachEvent()方法将指定的监听器注册到目标对象上，当该对象出发指定的事件时，指定的回调函数就会被执行

eventNameWithOn：事件类型字符串，比如onclick、onmouseover 要带on

callback：事件处理函数，当目标触发事件时回调函数被调用

4.手动调用点击事件

on绑定

arrow_r.event()

eg:

绑定对象.click()

侦听器绑定

var evt = new Event('click') //固定语法
绑定对象.dispathEvent(evt)

删除事件

1.传统注册方式

eventTarget.οnclick=null;

2.事件监听方式

eventTarget.removeEventListener(type,listener);

type：需要删除的事件类型

listener：需要删除的函数名称

事件对象

event事件对象是写到侦听函数中的形参，不需要传递参数，是事件的一系列相关数据的集合，跟事件相关（兼容性window.event）
兼容性写法 e=e || window.event

事件对象的常见属性和方法

this 返回绑定事件的对象

e.target 返回触发事件的对象

e.srcElement 返回触发对象（ie6-8兼容）

e.type 返回事件的类型

e.preventDefault() 该方法阻止默认事件

e.stopPropagation() 该方法阻止冒泡

e.cancelBubble 阻止冒泡（ie6-8兼容）

e.returnValue 阻止默认事件 （ie6-8兼容）

注：
currentTarget与this类似 有兼容性问题

return false 阻止默认行为 没有兼容性问题 但后面的代码不会被执行

鼠标事件对象（MouseEvent）

e.clientX 返回鼠标相对于浏览器窗口可视区的X坐标

e.clientY 返回鼠标相对于浏览器窗口可视区的Y坐标

e.pageX 返回鼠标相对于文档页面的X坐标

e.pageY 返回鼠标相对于文档页面的Y坐标

e.screenX 返回鼠标相对于电脑屏幕的X坐标

e.screenY 返回鼠标相对于电脑屏幕的Y坐标

e.offsetX 鼠标相对于事件源左上角X轴的坐标

e.offsetY 鼠标相对于事件源左上角Y轴的坐标

事件对象.button 获取点击信息
0 为鼠标左键，2 为鼠标右键,1滚轮

键盘事件对象（KeyboardEvent）

keyCode 返回该键的ASCII码

常见的键盘码（了解）

8： 删除键（delete）
9： 制表符（tab）
13： 回车键（ebter）
16： 上档键（shift）
17： ctrl 键
18： alt 键
27： 取消键（esc）
32： 空格键（space）

组合键

事件对象.shiftKey 是否按住shift键 返回布尔值

事件对象.ctrlKey 是否按住ctrl键 返回布尔值

事件对象.altKey 是否按住alt键 返回布尔值

注：
onkeydown 和 onkeyup 不区分字母大小写，onkeypress区分大小写

当使用 keydown 和 keypress时先触发事件在输入键盘按键
keyup事件触发时，键盘按键已经输入完

触摸事件对象（TouchEvent）

touches 正在触摸屏幕的所有手指的一个列表

targetTouches 正在触摸当前DOM元素上的手指的一个列表（伪数组）

changedTouches 手指状态发生变化的列表，从无到有，从有到无的变化

注：拖动元素需要当前手指的坐标，targetTouches[0]里的pageX和pageY

手指移动也会触发滚动屏幕所以要阻止默认屏幕滚动 e.preventDefault()

事件委托

不给每个子节点单独设置设置事件监听，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点

通过e.target获取点击元素再通过tagname判断
eg：ul ==> li

ul.onclick=function(e){
	if(e.target.tagName === 'li'){
		//code
	}
}