理解JavaScript事件对象

更新时间：2016年01月25日 11:50:40 投稿：lijiao

这篇文章主要为大家介绍了JavaScript事件对象，了解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包含相同的值。如：

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 clicked

eventPhase

该属性用来确定事件当前正位于事件流的哪个阶段。

如果是捕获阶段则等于1；
如果是目标对象阶段则等于2；
如果是冒泡阶段则等于3；

如：

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事件对象，希望对大家的学习有所帮助。

您可能感兴趣的文章:

返回上一页并自动刷新的JavaScript代码
返回上一页并自动刷新，JavaScript一般的使用history.go(-1)和history.back()等,需要的朋友可以参考下
2014-02-02
深入探究JavaScript中RunJs的特性及用途
JavaScript已经成为现代Web开发的中流砥柱,实时调试、快速原型设计以及代码的即时反馈通常需要开发者使用多个工具和手段,现代工具的涌现为我们带来了更好的解决方案,而RunJs就是其中之一,本文将带您深入探讨RunJs的特性、用途,需要的朋友可以参考下
2023-08-08
js模拟类继承小例子
使用js模拟类继承小例子，学习js面向对象的朋友可以参考下。
2010-07-07
设为首页与加入收藏的JS代码(多浏览器支持)
由于现在很多浏览器版本，那么多浏览器兼容的设为首页与加入收藏功能代码，就比较好用，这里简单的整理下，方便需要的朋友
2012-12-12
momentjs使用详细说明
这篇文章主要介绍了momentjs详细使用说明,使用 Moment.js 可以轻松地获取上周、上月和前三个月的起始和结束时间，在示例中，我们传入了 '2023-07-15'，并将返回的日期信息存储在 dateInfo 变量中，然后将其打印到控制台上，需要的朋友可以参考下
2023-07-07
JS中URL.createObjectURL使用示例讲解
URL.createObjectURL()方法会根据传入的参数创建一个指向该参数对象的URL. 这个URL的生命仅存在于它被创建的这个文档里. 新的对象URL指向执行的File对象或者是Blob对象,这篇文章主要给大家介绍了关于JS中URL.createObjectURL使用的相关资料,需要的朋友可以参考下
2022-03-03
小程序实现倒计时组件的使用示例
倒计时是指从一个固定的时间开始,向前推算一段时间,来计算目标时间或剩余时间的过程,本文主要介绍了小程序实现倒计时组件的使用示例,具有一定的参考价值,感兴趣的可以了解一下
2023-09-09
js实现首屏延迟加载实现方法 js实现多屏单张图片延迟加载效果
这篇文章主要介绍了js实现首屏延迟加载实现方法，以及js实现多屏单张图片延迟加载效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-07-07
js中页面的重新加载(当前页面/上级页面)及frame或iframe元素引用介绍
用JavaScript刷新上级页面和当前页面在某些情况下还是比较实用的，感兴趣的朋友可以了解下另外介绍一下frame或iframe元素的引用方法，希望本文对你有所帮助
2013-01-01
JS实现的添加弹出层并完成锁屏操作示例
这篇文章主要介绍了JS实现的添加弹出层并完成锁屏操作,涉及JS针对页面元素与样式动态操作相关技巧,需要的朋友可以参考下
2017-04-04