DOM（JS）事件
js是一个以事件为驱动的脚本语言，在开发过程中想要实现页面内容与用户的交互,需要借助各种事件来完成.
系统会为每一个事件自动创建一个对象event,事件对象里存储了所有用户交互的
信息,我们可以在用户进行交互之后通过event对象获取到对象里的数据,进而进行
随后的反应操作.
火狐浏览器不支持event对象,如果想用火狐,需要在对应的点击
事件的函数的参数部分人为的添加一个参数,这个参数就是对应的事件对象。
事件的分类：
鼠标事件,键盘事件,表单事件,触屏事件
鼠标事件
鼠标单击事件onclick
鼠标双击事件ondblclick
鼠标移动到或移出某个标签
onmouseenter,onmouseleave //onmouseenter和onmouseleave不存在事件冒泡
onmouseover,onmouseout
鼠标按下事件onmousedown
鼠标弹起事件onmouseup
鼠标右键点击oncontextmenu
鼠标滚轮事件onmousewheel
鼠标移动事件onmousemove
键盘事件
键被按下事件onkeydown
键弹起事件onkeyup
键一直按下的时候执行onkeypress
表单事件
表单事件:仅仅适用于表单操作以及表单类型的控件
1.onfocus:当某个表单控件处于被选中状态时执行,(获得焦点)
2.onblur:当某个表单控件取消被选中状态时执行,(失去焦点)
3.onsubmit事件是给form表单关联的
准备提交表单事件(点击submit按钮时执行)
4.onreset事件是给form表单关联的
表单被重置事件(点击reset按钮执行)
5.onchange事件是给指定的输入框关联的
当指定的输入框中的内容发生变化时执行事件
读写性:控制某个对象或者某个属性的操作状态
读写: 指可以获取对应的值,也可以修改对应的值
只读:只可获取对应的值,不可以修改对应的值
通过js事件对象的属性和找到鼠标的位置
clientX||clientY 鼠标点击的点=>距离窗口上部和左边的距离.
screenX||screenY 鼠标点击的点=>距离屏幕上部和左边的距离.
事件冒泡和事件捕获
事件传播
1.冒泡
2.捕获
默认情况下,事件使用的是冒泡方式,我们也可以显示的指定事件的传播的方式.
方法时在注册事件监听里将useCapture参数的值设置成true
1.事件冒泡:
当某一个事件在某个dom元素被触发时,
事件将跟随该节点所继承自的各个父节点冒泡穿过整个dom节点层,一直到达根节点.
2.该事件的处理从Dom的跟节点开始处理,而不是从触发了该元素的dom元素开始.
依次通过触发节点的继承父节点,直至到达触发的最终元素停止.
阻止事件传播
1.阻止普通事件传播 event.preventDefault();
2.阻止冒泡事件传播 event.stopPropagation();
addEventlistener("type",listener,useCapture);
type:事件类型
listener:event listener function
useCapture:false代表冒泡,true代表捕获.
判断滚轮方向
在火狐浏览器中对于滚轮事件的添加使用DOMMouseScroll,同时判断滚轮是向上还是向下,
也不在使用wheelDelta属性,而是使用detail属性,
同时detail属性对判别标准与普通的判别标准正好相反.大于零向下,小于零向上.