js事件总结

一、分类

1、点击事件

单击事件 onclick
双击事件 ondbclick

2、鼠标事件

鼠标按下 onmousedown
鼠标抬起 onmouseup
光标移入元素 onmouseover onmouseenter
光标移出元素 onmouseout onmouseleave
鼠标移动事件 onmousemove

3、键盘事件

键盘按下 onkeydown
键盘抬起 onkeyup

4、输入框事件

输入框获取焦点 onfocus
输入框失去焦点 onblur
输入框改变事件 onchange
输入事件 oninput

二、事件对象

1.事件对象: 事件触发的时候，浏览器记录的重要信息，这些信息都存储在一个对象之中，这个对象叫做事件对象
屏幕为参照物的鼠标坐标 screenX , screenY
以可视区域为参照物的鼠标坐标 clientX , clientY
以文档为参照物的鼠标坐标 pageX , pageY
以附近元素为参照物的鼠标坐标 offsetX , offsetY
2.键盘事件对象
e = e || event;
let code = e.keyCode || e.which ;

三、事件监听

dom.addEventListener( “事件名” , 事件处理函数 )
事件绑定一个dom对象的同类型事件只能有一个事件处理函数
事件监听一个dom对象的同类型事件可以有n个事件处理函数
事件处理函数执行时的顺序和绑定时执行的顺序是一致的
删除一个事件处理函数：dom.removeEventListener( “事件名” , 函数名 )

四、事件冒泡

事件由目标元素逐层向上传递，直到最高级别元素为止
阻止事件冒泡 e.stopPropagation()