JS事件是由访问 Web 页面的用户引起的一系列操作。当用户执行某些操作的时候，再去执行一系列代码，或者用来获取事件的详细信息，如鼠标位置、键盘按键等…
JS可以处理的事件类型为：鼠标事件、键盘事件、HTML事件所有的事件处理函数都会都有两个部分组成，即：on + 事件名称。
1、先来介绍鼠标事件：
-
onclick:用户单击鼠标按钮时触发 -
ondblclick:当用户双击主鼠标按钮时触发 -
onmousedown:当用户按下鼠标还未弹起时触发 -
onmouseup：当用户释放鼠标按钮时触发 -
onmouseover：当鼠标移到某个元素上方时触发 -
onmouseout：当鼠标移出某个元素上方时触发 -
onmousemove：当鼠标指针在元素上移动时触发
2、HTML事件：
-
onload：当页面或者资源完全加载后在 window 上面触发 -
onselect：当用户选择文本框(input 或 textarea)中的一个或多个字符触发 -
onchange：当文本框(input 或 textarea)内容改变且失去焦点后触发 -
onfocus：当页面或者元素获得焦点时在 window 及相关元素上面触发 -
onblur：当页面或元素失去焦点时在 window 及相关元素上触发 -
onresize：当窗口或框架的大小变化时在 window 或框架上触发 -
onscroll：当用户滚动带滚动条的元素时触发
3、事件对象：
当触发某个事件时，会产生一个事件对象，这个对象包含着所有与事件有关的信息 。(导致事件的元素、事件的类型、以及其它与特定事件相关的信息。)
通过事件绑定的执行函数是可以得到一个隐藏参数的 。说明，浏览器会自动分配一个参数，这个参数其实就是 event 对象。
// Event对象获取方式 （兼容）
el.onclick=function(eve){
let e = eve || window.event;
}-
event.button属性：当前事件触发时哪个鼠标按键被点击 -
clientX、clientY属性：鼠标在可视区X坐标和Y坐标，即距离左边框和上边框的距离 -
screenX、screenY属性：鼠标在屏幕区X坐标和Y坐标，即距离左屏幕和上屏幕的距离 -
offsetX、offsetY属性：鼠标相对于事件源的X坐标和Y坐标 -
pageX、pageY：鼠标相对于文档的X坐标和Y坐标
4、键盘事件：
-
onkeydown：当用户按下键盘上任意键触发，如果按住不放，会重复触发 -
onkeypress：当用户按下键盘上的字符键触发，如果按住不放，会重复触发 -
onkeyup：当用户释放键盘上的键触发
5、组合键：
全为bool类型：
-
altKey属性，表示发生事件的时候alt键是否被按下 -
ctrlKey属性，表示发生事件的时候ctrl键是否被按下 -
shiftKey属性，表示发生事件的时候shift键是否被按下
6、keyCode/which兼容：
事件的冒泡：
事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。也就是说当子元素的某个事件被触发时，会依次向上触发所有父元素的相同事件。
//阻止事件冒泡
e.stopPropagation();
//低版本ie
e.cancelBubble = true;阻止事件冒泡的封装：
// 阻止事件冒泡封装
function stopBubble(eve){
if(event.stopPropagation){
eve.stopPropagation();
}else{
eve.cancelBubble=true;
}
}7、浏览器默认对象及阻止方式：
浏览器的默认行为：
JavaScript事件本身所具有的属性，例如a标签的跳转，Submit按钮的提交，右键菜单，文本框的输入等。
阻止默认行为的方式 ：
w3c的方法是：e.preventDefault()
IE的方法是：e.returnValue = false;
8、DOM二级事件处理程序：
添加事件监听器：ele.addEventListener(事件名，处理函数，布尔值)。
现代浏览器（IE9、10、11 | ff, chorme, safari, opera）。
注意：事件名不带on，处理函数为函数引用，布尔值代表冒泡(内到外)或捕获（外到内）
//false 事件冒泡
element.addEventListener(“click”,function(){},false);
//true事件捕获
element.addEventListener(“click”,function(){},true);
// 移除事件监听器：removeEventListener(事件名，处理函数)
IE8及以下的事件监听器：attachEvent(事件名，处理函数),
detachEvent(事件名，处理函数)
// 注意：事件名是带on的9、事件委托:
利用事件冒泡的原理，把本应添加给某元素上的事件委托给他的父级（外层）。
比如:
如果一个div中有很多p标签，循环遍历所有的p标签，给p标签添加事件效率比较低，我们可以监听div的点击事件，利用子元素的点击事件都会冒泡到父元素的特点，就可以知道什么时候点击了p标签。
好处：效率高，可以给未来元素添加事件。
事件委托的封装如下：
// 事件委托的封装
function eveEnt(child,cb){
return function(eve){
let e = eve || window.eveEnt;
let targetEle = e.target || e.srcElement;
for(let i=0;i<child.length;i++){
if(child[i] == targetEle){
cb.call(targetEle)();
}
}
}
}10、利用鼠标的onmousedown、onmousemove、onmouseup事件，我们可以实现简单的拖拽效果：
CSS部分：
<style>
#box{width: 100px;height: 100px;background: black;position: absolute;left:0;top:0;}
</style>HTML部分：
<div id="box"></div>JS部分：
var obox = document.getElementById("box");
var clientW = document.documentElement.clientWidth;
var clientH = document.documentElement.clientHeight;
obox.onmousedown = function(eve){
var downEvent = eve || window.event;
document.onmousemove = function(eve){
var moveEvent = eve || window.event;
// 提前计算将来要生效的left和top，方便做边界限定
var l = moveEvent.pageX - downEvent.offsetX;
var t = moveEvent.pageY - downEvent.offsetY;
// 边界限定
// 左边的最小值
if(l < 0) l = 0;
// 上边的最小值
if(t < 0) t = 0;
// 右边的最大值：视口的宽度-div的宽度
if(l > clientW - obox.offsetWidth){
l = clientW - obox.offsetWidth;
}
// 下边的最大值：视口的宽度-div的宽度
if(t > clientH - obox.offsetHeight){
t = clientH - obox.offsetHeight;
}
obox.style.left = l + "px";
obox.style.top = t + "px";
}
document.onmouseup = function(){
document.onmousemove = null;
}
}
