JavaScript：进一步了解事件

最新推荐文章于 2024-10-02 05:39:15 发布

kllo__

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量142

点赞数

分类专栏： javascript 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/kllo__/article/details/122937000

版权

javascript 专栏收录该内容

56 篇文章 0 订阅

订阅专栏

事件传播

DOM 将网页表示为节点的层次结构。在子节点上触发的事件将在父节点上触发的事件将在父节点上触发，然后是父节点的父节点，直到 DOM 的根节点（document 变量），这称为事件传播。要查看实际传播情况，请使用此 HTML 代码创建一个小型 DOM 层次结构。

<html>
 <head>
 </head>
 <body>
		<p id="para">A paragraph with a <button id="propa">button</button> inside</p>
 </body>
</html>

下面是补充的 JavaScript 代码，它在 button 、父节点（段落）和父节点的父节点（DOM 的根节点）上添加了单击事件处理程序。

// Click handler on the document
document.addEventListener("click", e => {
  console.log("Document handler");
});
// Click handler on the paragraph
document.getElementById("para").addEventListener("click", e => {
  console.log("Paragraph handler");
});
// Click handler on the button
document.getElementById("propa").addEventListener("click", e => {
  console.log("Button handler");
});

点击按钮的结果：

浏览器控制台中的结果显示了从 button 到 document 级别的单击事件的传播。你单击了按钮，意味着你也单击了段落，这意味着你也单击了 document。

但是，也许你只想让一个事件在按钮被点击后就开始，而不考虑更大的生态系统？可以在任何时候通过从事件处理程序调用 Event 对象上的 stopPropagation() 方法来中断事件传播。这有助于避免多次处理同一事件。

在按钮的 click 事件处理程序中添加一行可以防止 click 事件在 DOM 树中到处传播。



// Click handler on the button
document.getElementById("propa").addEventListener("click", e => {
  console.log("Button handler");
  e.stopPropagation(); // Stop the event propagation
});

添加这一行代码之后的运行结果：

取消操作的默认行为

页面上的大多数用户操作都与默认行为相关联。点击链接会导航到链接目标，用鼠标右键点击任何地方会出现上下文菜单等等。可以通过调用事件处理程序中 Event 对象的 preventDefault() 方法来取消默认行为。

让我们使用下面的 HTML 和 JavaScript 代码来查看这种可能性。

<html>
 <head>
 </head>
 <body>
		<p>Time on your hands? <a id="forbidden" href="https://9gag.com/">Click here</a></p>
 </body>
</html>

// Handling clicking on the forbidden link
document.getElementById("forbidden").addEventListener("click", e => {
  alert("Yes... But no.");
  e.preventDefault(); // Cancels the default behavior
});

点击按钮的结果：