Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
事件通常与函数结合使用，函数不会在事件发生前被执行！
事件对象 封装了所有的事件的相关的信息 ，当事件发生时，自动创建
DOM中一个事件的发生 三个阶段
1.捕获
由外到内，记录各级父元素上绑定的相同的事件
2.目标触发
首先触发目标元素上的事件处理函数
3.冒泡
按照捕获顺序，反向执行，由内到外，一次触发各级父元素绑定的事件处理函数
Event
1.在HTML中绑定 <ANY onclick="alert(‘hello world‘);"
这种是直接在HTML中绑定事件
2.为事件属性赋值一个函数：
document.getElementsByTagName("div")[0].onclick = fun;
function fun(){
alert("hello world!");
}
这种是写在JS里先获取到元素在为其绑定事件
3.addEventListener
ANY.addEventListener("事件名",fun , capture)
apture:是否在捕获阶段提前触发，默认是false 控制事件触发的顺序
ANY.removeEventListener("事件名",fun , capture)
function shoot1 () {
console.log(‘发射的是普通子弹‘);
}
function shoot2 () {
console.log(‘发射的是跟踪导弹‘);
}
事件监听，也是写在JS中
事件有一个冒泡，前面提到过在事件开始之前会有一个捕获阶段，那么冒泡就是根据捕获的方向顺序触发事件。
通过设置事件监听中的capture属性，将其改成true可以让其先触发
获取事件对象以及取消冒泡的方法：
事件对象 当事件发生时，自动创建的，封装所有事件信息的一个对象
获取：
DOM标准：事件对象默认作为事件处理函数的第一个参数传入
function 处理函数(e/event){
这个e就是在事件发生时，自动获得的事件对象
}
IE8：
在全局window，定义了一个event
function 处理函数(){
window.event
}
兼容：function 处理函数(e){
e = e || window.event;
取消冒泡：
DOM标准：e.stopPropagation();
IE8：e.cancelBubble = true;
兼容： if(e.stopPropagation())
e.stopPropagation()
else
e.cancelBubble = true;
最后写下获取事件坐标的方法
document.getElementById("box").onclick = function (e) {
console.log(‘相对于屏幕的：‘,e.screenX,e.screenY );
console.log(‘相对于文档显示区：‘,e.clientX,e.clientY );
console.log(‘相对于div：‘,e.offsetX,e.offsetY );
}
原文：https://www.cnblogs.com/yzxyzx/p/11436721.html