什么是event对象

Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。事件通常与函数结合使用，函数不会在事件发生前被执行！

event对象-事件添加方法

1、事件有DOM0, DOM2的区分。

DOM0就是直接通过 onClick写在html里面的事件，例： <input onClick="alert(1)" />、JS写onClick=function（）{}函数

    DOM2是通过addEventListener 绑定/监听 事件 例：document.getElementById("myTest").addEventListener("click",function(){alert(1)}, false);

event对象-事件添加方法

监听方法

1、有两个方法用来添加和移除事件处理程序：

     addEventListener()和removeEventListener()。

它们都有三个参数：第一个参数是事件名（如click）；第二个参数是事件处理程序函数；  第三个参数如果是true则表示在捕获阶段调用，为false表示在冒泡阶段调用。

 addEventListener():可以为元素添加多个事件处理程序，触发时会按照添加顺序依次调用。例：document.getElementById("Test").addEventListener("click",function(){alert(1)}, false);

【注】removeEventListener():不能移除匿名添加的函数。

冒泡与捕获

DOM2级包含3个事件：事件捕获阶段、处于目标阶段和事件冒泡阶段

例 ：<span><a></a></span>

点击a后capturing(捕捉)阶段事件传播会从document-> span->a，然后发生在a，最后bubbling(冒泡)阶段事件传播会从a->span->document 。

例：<div><p>元素</p></div>。这两个元素都绑定了click事件，如果用户点击了p，它在div和p上都触发了click事件，那这两个事件处理程序哪个先执行呢？事件顺序是什么？

div先触发，这就叫做事件捕获。

事件捕获：当你使用事件捕获时，父级元素先触发，子级元素后触发，即div先触发，p后触发。

p先触发，这就叫做事件冒泡

事件冒泡：当你使用事件冒泡时，子级元素先触发，父级元素后触发，即p先触发，div后触发。

【注】选择绑定事件时采用事件捕获还是事件冒泡，方法就是绑定事件时通过addEventListener函数，它有三个参数，第三个参数若是true，则表示采用事件捕获，若是false，则表示采用事件冒泡。

Event相关方法与属性

1、event.stopPropagation()：终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后，该节点上处理该事件的处理程序将被调用，事件不再被分派到其他节点

2、event.preventDefault() ：取消事件的默认动作(a标签的href)。

3、event.clientX、event.clientY：鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性

4、event.offsetX、event.offsetY:鼠标相对于事件源元素（触发事件的元素）的X,Y坐标，只有IE事件有这2个属性，标准事件没有对应的属性。

 与event.offsetLeft、event.offsettop一样

5、event.screenX、event.screenY：鼠标相对于用户显示器屏幕左上角的X,Y坐标。标准事件和IE事件都定义了这2个属性

6、event.keyCode：获得按键的code值