JavaScript | 事件对象

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

一、获取事件对象

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

?

1 2 3 4 5 6 7 8

<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 值以及文本信息为例，具体代码如下。

?

1 2 3 4 5 6 7 8 9 10 11 12

<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>元素添加事件，并在控制台输出提示信息，具体代码如下。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<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>设置为最小。