在触发DOM上的某个事件时，会产生一个事件对象event。
DOM中的事件对象
兼容DOM的浏览器会将一个event对象传入到事件处理程序中。event对象包含与创建它的特定事件有关的属性和方法。除法的事件类型不一样，可用的属性方法就不一样。不过，所有的事件都会有下表列出的成员。
下面列出了 2 级 DOM 事件标准定义的属性：
下面列出了 2 级 DOM 事件标准定义的方法。IE 的事件模型不支持这些方法：
this、target、currentTarget
在事件处理程序的内部，对象this始终等于currentTarget的值，而target则只包含事件的实际目标。如果直接将事件处理程序指定给了目标元素，则this、currentTarget和target包含相同的值。如：
var btn = document.querySelector("#btn");btn.onclick=function () { console.log(event.currentTarget === this); //true console.log(event.target === this); //true}由于click事件的目标是btn按钮，所以这三个值是相等的。如果事件处理程序在按钮的父节点（document.body）中，那么这些值则不相同。如：
var btn = document.querySelector("#btn");document.body.onclick=function () { console.log(event.currentTarget === document.body); //true console.log(this === document.body); //true console.log(event.target === btn); //true 因为btn没有注册事件处理程序，所以该click事件就冒泡到了document.body}在这里，this和currentTarget都是document.body，因为事件处理程序是注册到这个元素上的。但是target元素却等于按钮元素，因为它是click事件的真正目标。由于按钮并没有注册事件处理程序，结果click事件就冒泡到了document.body，在那里事件才能得到处理。
1、type
在需要通过一个函数处理多个事件时，可以使用type属性。如：
//获取按钮var btn = document.querySelector("#btn");//设置多个事件var handler = function() {//检测事件的类型 switch (event.type) { case "click": console.log("i click it"); break; case "mouseover": console.log("i enter it"); break; case "mouseout": console.log("i leave it"); break; }}//给响应的事件赋值btn.onclick = handler;btn.onmouseover = handler;btn.onmouseout = handler;2、preventDefault()
要阻止特定事件的默认行为，可以使用该方法。如：
var aTags = document.getElementsByTagName("a");for (var i = 0; i < aTags.length; i++) { var currentATag = aTags[i]; currentATag.onclick = function() { event.preventDefault(); }};以上代码即屏蔽了网页上全部的a标签超链接功能。要注意的是，只有cancelable属性设置为true的事件，才可以使用preventDefault()来取消其默认行为。
3、stopPropagation()
立即停止事件在DOM层次中的传播，即取消进一步的事件捕获或冒泡。例如，直接添加到一个按钮的事件处理程序可以调用该方法，从而避免触发注册在document.body上面的事件处理程序。如：
var btn = document.getElementById("btn");btn.onclick = function () { console.log("btn clicked"); // event.stopPropagation();};window.onclick = function () { console.log("clicked");};//单击一下的结果：//btn clicked//clicked又如：
var btn = document.getElementById("btn");btn.onclick = function () { console.log("btn clicked"); event.stopPropagation();};window.onclick = function () { console.log("clicked");};//单击一下的结果：//btn clickedeventPhase
该属性用来确定事件当前正位于事件流的哪个阶段。
如：
var btn = document.getElementById("btn");document.body.addEventListener("click", function() { console.log("bodyListener" + event.eventPhase);}, true) //捕获阶段btn.onclick = function() { console.log("btn" + event.eventPhase);} //目标对象阶段，实际上属于冒泡阶段（在btn上）document.body.onclick = function() { console.log("body" + event.eventPhase);} //冒泡阶段（在body上）又如：
var btn = document.getElementById("btn");document.body.addEventListener("click", function() { console.log(event.eventPhase); //1 console.log(event.currentTarget); //HTMLBodyElement}, true);btn.addEventListener("click", function() { console.log(event.eventPhase); //2 console.log(event.currentTarget); //HTMLInputElement});document.body.addEventListener("click", function() { console.log(event.eventPhase); //3 console.log(event.currentTarget); //HTMLBodyElement});流程大概是：
document.body 捕获阶段 --> btn 目标对象阶段 --> document.body 冒泡阶段
以上就是关于JavaScript事件对象，希望对大家的学习有所帮助。
新闻热点
疑难解答
