JS 事件

一：鼠标事件：

click：当单击鼠标按钮并在松开时触发；

    oBox.onclick  = function(){ console.log('单击了鼠标'); };

dblclick：当双击鼠标按钮时触发；

mousedown: 当按下了鼠标还未松开时触发；

mouseup： 释放鼠标按钮时触发；

mousemove： 当鼠标指针在某个元素上移动时触发。

mouseenter/mouseover： 当鼠标移入某个元素的那一刻触发；

mousleave/mouseout  当鼠标刚移出某个元素的那一刻触发；

二 ：键盘事件

keydown ：当用户按下键盘上某个键触发，如果按住不放，就会重复触发；

keypress： 当用户按下键盘上的字符键触发，如果按住不放，会重复触发；

keyup： 当用户释放键盘上的某个键触发；

（ev.keyCode 键码）

三： HTML事件

load：当页面完全加载后触发

unload： 当页面完全卸载后触发

select： 当用户选择文本框（input 或 textarea）中的内容触发。

change： 当文本框（input 或 textarea）内容改变且失去焦点后触发

focus: 当页面或者元素获得焦点时触发

blur： 当页面或元素失去焦点时触发

sumbit： 当用户点击提交按钮在<form>元素节点上触发

reset： 当用户点击重置按钮在<form>元素节点上触发

scroll: 当用户滚动带滚动条的元素时触发

四： 事件对象event

①浏览器的兼容写法：

box.onclick =function(evt){vare= evt || event;//获取到event对象(事件对象)console.log(e);};

②事件对象属性：

target：返回触发此事件的元素（时间的目标节点）

clientX： 浏览器可视区域的x坐标

clientY:   浏览器可视区域的y坐标

screenX： 显示器屏幕的x坐标

screenY： 显示器屏幕的y坐标

offsetX： 鼠标点击的元素位置距离元素左边界的x坐标

offsetY： 鼠标点击的元素位置距离元素上边界的y坐标

③ 事件冒泡

当一个元素接收到事件以后，会将接收到的事件传递给父级元素，一直传递给顶层window；可以利用事件冒泡，可以减少事件的绑定，有利于性能优化

阻止事件冒泡：

非IE:  ev.stopPropagation()

 IE:  ev.cancelBubble =true;

// 兼容写法

ev.stopPropagation ? ev.stopPropagation() : ev.cancelBubble =true;