JavaScript | 事件对象

引言：在JavaScript中，当发生事件时，都会产生一个事件对象event ，这个对象中包含着所有与事件相关的信息，包括发生事件时DOM元素、事件的类型以及其他与特定事件相关的信息。例如，因鼠标移动发生事件时，事件对象中会包括鼠标事件（横、纵坐标）等相关信息；因操作键盘发生事件时，事件对象中会包括按下键的键值等相关信息。

一、获取事件对象

虽然所有浏览器都支持事件对象 event，但是不同的浏览器获取事件对象的方式不同。在标浏览器中会将一个 event 对象直接传入到事件处理程序中，而早期版本的IE浏览器(IE6~8)中，仅能通过window.event才能获取事件对象。
接下来，以获取 button 按钮单击事件的事件对象为例进行演示，示例代码如下。

<button id="btn">获取 event对象</button>
<script>
var btn = document.getElementById('btn');
 btn.onclick=function(e){
var event = e || windows.event;
console.log(event);
};
</script>

上述第3行代码，根据 id 属性值获取 button 按钮的元素对象。第 4~7 行代码，通过动态绑定式为按钮添加单击事件。其中，事件处理函数中传递的参数 e(参数名称只要符合变量定义的规则即可)表示的就是事件对象 event，第5行通过“或”运算符实现不同浏览器间获取事件象兼容的处理。若是标准浏览器，则可以直接通过e获取事件对象，否则若是早期版本的IE浏览器(IE6~8)则需要通过 window.event 才能获取事件对象。

二、常用属性和方法

在事件发生后，事件对象event中不仅包含着与特定事件相关的信息，还会包含一些所有事件都有的属性和方法。其中，常用的属性和方法如下表

事件对象属性方法 　　　　　　说明

e.target　　　　　　　　　　   返回触发事件的对象 标准
e.type 　　　　　　　　　    　返回事件的类型 比如click mouseover 不带on
e.stopPropagation() 　　　　    组织冒泡 标准
e.preventDefault() 　　　　   　该方法阻止默认事件（默认行为） 标准 比如禁止链接跳转
e.srcElement 　　　　　　       返回触发事件的对象 非标准 IE6-8使用
e.cancelBubble 　　　　          该属性阻止冒泡 非标准 IE6-8使用
e.returnValue 　　　　　　     该方法阻止默认事件（默认行为） 非标准 IE6-8使用

(1)获取触发事件的元素
以获取 button 按钮的元素节点、id 值、class 值以及文本信息为例，具体代码如下。

<button id-"btn" class-"btnClass">获取 event 对象</button>
<script>
var btn = document.getElementById('btn');
 btn.onclick = function(e){
//处理兼容问题:触发此事件的元素对象
var obj = event.target ll window.event.srcElement;
console.log(obj.nodeName); //获取元素节点名，如:BUTTON 
console.log(obj.id); // 获取元素的 id 值，如:btn 
console.log(obj.className); // 获取元素的 class 名，如:btnClass 
console.log(obj.innerText); // 获取元素的文本值，如:获取 event 对象 
};
</script>

 

从上述示例可以看出，通过事件对象的属性 target 或srcElement即可获取触发事件的元素相关信息，在项目中则可直接利用这些信息进行相关的处理，以便于程序的开发。
(2)阻止事件冒泡

(2)阻止事件冒泡
事件冒泡是指，事件的响应像水泡一样上升至最顶级对象，因此把这个过程称之为“事件冒泡”。例如，为3个互相嵌套的<div>元素添加事件，并在控制台输出提示信息，具体代码如下。

<div id="red">
<div id="green">
<div id="yellow"></div>
</div>
</div>
<script>
//分别获取互相嵌套的div元素
var red=document.getElementById('red');
var green =document.getElementById('green');
var yellow=document.getElementById('yellow');
//分别为互相嵌套的div元素添加单击事件
red.onclick = function(){ console.log('red');};
green.onclick = function() { console.log('green'); };
yellow.onclick = function() { console.log('yellow'); };
</script>

从上述代码可知，当单击 id 为 red 的<div>时，则在控制台输出 red。同理，当用户单击不同颜色的<div>块时，则在控制台输出对应的颜色值。这里将最外层<div>的宽高设置为最大，内层的<div>设置为最小。