JavaScript事件 "事件对象"的注意要点

编辑：rootadmin

推荐整理分享JavaScript事件 "事件对象"的注意要点，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助，希望把文章链接给更多的朋友！

在触发DOM上的某个事件时，会产生一个事件对象event。

DOM中的事件对象

兼容DOM的浏览器会将一个event对象传入到事件处理程序中。event对象包含与创建它的特定事件有关的属性和方法。除法的事件类型不一样，可用的属性方法就不一样。不过，所有的事件都会有下表列出的成员。

下面列出了 2 级 DOM 事件标准定义的属性：

bubbles: 返回布尔值，指示事件是否是起泡事件类型。 cancelable: 返回布尔值，指示事件是否可拥可取消的默认动作。 currentTarget: 返回其事件监听器触发该事件的元素。 eventPhase: 返回事件传播的当前阶段。 target: 返回触发此事件的元素（事件的目标节点）。 timeStamp: 返回事件生成的日期和时间。 type: 返回当前 Event 对象表示的事件的名称。

下面列出了 2 级 DOM 事件标准定义的方法。IE 的事件模型不支持这些方法：

initEvent(): 初始化新创建的 Event 对象的属性。 preventDefault(): 通知浏览器不要执行与事件关联的默认动作。 stopPropagation(): 不再派发事件。

this、target、currentTarget

在事件处理程序的内部，对象this始终等于currentTarget的值，而target则只包含事件的实际目标。如果直接将事件处理程序指定给了目标元素，则this、currentTarget和target包含相同的值。如：

由于click事件的目标是btn按钮，所以这三个值是相等的。如果事件处理程序在按钮的父节点（document.body）中，那么这些值则不相同。如：

在这里，this和currentTarget都是document.body，因为事件处理程序是注册到这个元素上的。但是target元素却等于按钮元素，因为它是click事件的真正目标。由于按钮并没有注册事件处理程序，结果click事件就冒泡到了document.body，在那里事件才能得到处理。