在JavaScript中，事件是用户与页面交互的桥梁。事件可以是点击、键盘按键、鼠标移动等动作。当事件发生时，可以通过编写事件处理程序来指定要执行的操作。使用addEventListener方法可以为特定元素添加事件监听器，以便在触发事件时运行特定的JavaScript代码。
JavaScript 事件对象（Event Object）
JavaScript 事件对象是当浏览器或开发者创建的事件被触发时，传递给事件处理程序的一个参数，它包含了关于触发事件的详细信息，例如触发事件的元素、事件类型等，以下是关于 JavaScript 事件对象的详细介绍：
属性
| 属性名 | 描述 |
type | 返回事件的类型，如 “click”、”mousedown” 等。 |
target | 返回触发事件的元素。 |
currentTarget | 返回绑定事件处理程序的元素。 |
timeStamp | 返回事件发生的时间戳。 |
bubbles | 表示事件是否冒泡。 |
cancelable | 表示是否可以取消事件的默认行为。 |
defaultPrevented | 表示是否已经调用了 preventDefault() 方法来取消事件的默认行为。 |
eventPhase | 返回事件的传播阶段。 |
composedPath() | 返回事件的传播路径。 |
方法
| 方法名 | 描述 |
preventDefault() | 阻止事件的默认行为，如果事件可以被取消，则该方法会阻止事件的默认行为。 |
stopPropagation() | 阻止事件进一步传播到其他节点。 |
stopImmediatePropagation() | 阻止剩余的事件处理程序被执行。 |
isTrusted | 返回一个布尔值，表示事件是由用户行为产生的还是由脚本生成的。 |
示例代码
document.getElementById("myButton").addEventListener("click", function(e) {
console.log("事件类型： " + e.type);
console.log("触发元素： " + e.target);
console.log("绑定事件处理程序的元素： " + e.currentTarget);
console.log("事件时间戳： " + e.timeStamp);
}); 相关问题与解答
问题1：如何阻止事件的默认行为？
解答：可以使用事件对象的preventDefault() 方法来阻止事件的默认行为，在点击链接时阻止其跳转：
document.querySelector("a").addEventListener("click", function(e) {
e.preventDefault();
}); 问题2：如何阻止事件继续传播到其他节点？
解答：可以使用事件对象的stopPropagation() 方法来阻止事件继续传播到其他节点，阻止点击事件冒泡到父元素：
document.querySelector("button").addEventListener("click", function(e) {
e.stopPropagation();
}); 原创文章，作者：未希，如若转载，请注明出处：https://www.kdun.com/ask/1071753.html
本网站发布或转载的文章及图片均来自网络，其原创性以及文中表达的观点和判断不代表本网站。如有问题，请联系客服处理。
发表回复