JS高级程序设计——第13章事件 13.3 事件对象

最新推荐文章于 2024-07-12 10:43:17 发布

YuTong_

最新推荐文章于 2024-07-12 10:43:17 发布

阅读量185

点赞数

分类专栏： # 第十三章事件文章标签： javascript

本文链接：https://blog.csdn.net/YuTong_/article/details/105482686

版权

一、初识事件对象 event

在触发 DOM 上的某个事件时，会产生一个事件对象 event【触发时才会产生】，这个对象中包含着所有与事件有关的信息。包括导致事件的元素、事件的类型以及其他与特定事件相关的信息。
例如，鼠标操作导致的事件对象中，会包含鼠标位置的信息，而键盘操作导致的事件对象中，会包含与按下的键有关的信息。所有浏览器都支持 event 对象，但支持方式不同。

兼容DOM的浏览器会将一个event对象传入到事件处理程序中。无论指定事件处理程序时使用什么方法（DOM0 级或DOM2级），都会传入event对象。来看下面的例子。

这个例子中的两个事件处理程序都会弹出一个警告框，显示由 event.type 属性表示的事件类型。

event 对象包含与创建它的特定事件有关的属性和方法。触发的事件类型不一样，可用的属性和方法也不一样。不过，所有事件都会有下表列出的成员。【所有事件的事件对象都必定包含的属性和方法】
currentTarget和target：在事件处理程序内部，对象 this 始终等于 currentTarget 的值，而 target 则只包含事件的实际目标。如果直接将事件处理程序指定给了目标元素，则 this、currentTarget 和 target 包含相同的值。来看下面的例子。
如果事件处理程序存在于按钮的父节点中(例如 document.body)，那么这些值是不相同的。再看下面的例子。

当单击这个例子中的按钮时，this 和 currentTarget 都等于 document.body，因为事件处理程序是注册到这个元素上的。然而，target 元素却等于按钮元素，因为它是 click 事件真正的目标。由于按钮上并没有注册事件处理程序，结果 click 事件就冒泡到了 document.body，在那里事件才得到了处理。
type 属性：在需要通过一个函数处理多个事件时，可以使用 type 属性。例如:

var btn = document.getElementById("myBtn");
var handler = function(event){
   
	switch

关注