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

网络编程 2024/11/16 佚名

3 1 2

在触发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，在那里事件才能得到处理。

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;
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()来取消其默认行为。

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、如果是捕获阶段则等于1；
2、如果是目标对象阶段则等于2；
3、如果是冒泡阶段则等于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,事件,对象

华山资源网 Design By www.eoogi.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

华山资源网 Design By www.eoogi.com

评论“JavaScript事件 "事件对象"的注意要点”

暂无评论...

www.eoogi.com 华山资源网

120,135影音资源

344,641技术资源

22,817软件资源

435,032站长资源

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

JavaScript事件类型中UI事件详解

详解JavaScript中localStorage使用要点

评论“JavaScript事件 "事件对象"的注意要点”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

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

JavaScript事件类型中UI事件详解

详解JavaScript中localStorage使用要点

评论“JavaScript事件 "事件对象"的注意要点”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存