在前端开发中，我们经常需要处理用户与网页交互产生的各种事件。DOM（文档对象模型）为我们提供了一些基本的事件类型，例如click、mouseover等。但是，在某些情况下，我们可能会想知道当某个元素被关闭或移除时是否会触发DOM事件，比如用于追踪用户对页面的操作或者清理资源。
本文将探讨当HTML选择元素关闭时是否会引发DOM事件，以及如何处理这些事件。
关闭元素的方式
在HTML中，有多种方式可以关闭一个元素。最常见的方法是使用双标签，例如：
<div>这里是div元素内容</div>
此外，也可以使用单标签（自闭合标签），例如：
<img src="image.jpg" alt="图片">
还可以使用注释将元素关闭，例如：
<p>这里是段落内容<!-- 这是一个注释 --></p>
最后，还可以在JS代码中手动删除或隐藏元素。
关闭元素是否会引发DOM事件
在所有这些关闭元素的方式中，只有前两种方式——使用双标签和单标签——会引发DOM事件。
当元素被关闭时，浏览器会检查它是否已注册任何相关的事件处理程序。如果是，则会执行这些处理程序。例如，对于以下HTML代码：
<button onclick="alert('点击按钮')">点击我</button>当用户单击该按钮时，浏览器将调用onclick事件处理程序并弹出一个警告。
类似地，对于以下HTML代码：
<img onload="alert('图片已加载')" src="image.jpg" alt="图片">当图像完成加载时，浏览器将调用onload事件处理程序并弹出一个警告。
对于使用注释或JS删除的元素，它们不会引发任何DOM事件。
如何处理关闭元素事件
如果你想在元素关闭时执行一些操作，可以使用以下方法。
双标签元素
对于使用双标签的元素，你可以通过为其添加相关的事件处理程序来捕获其关闭事件。例如：
<div id="myDiv">这里是div元素内容</div>
<script>
const myDiv = document.querySelector('#myDiv');
myDiv.addEventListener('DOMNodeRemoved', function(event) {
console.log('元素已被删除');
});
</script>在此示例中，我们向选定的div元素添加了DOMNodeRemoved事件监听器。当该元素被删除时，将输出“元素已被删除”到控制台。
单标签元素
对于使用单标签的元素，你可以使用Image等具有onload和onerror事件的元素作为代理，以便在其资源（如图像）加载失败或成功时捕获关闭事件。例如：
-- -------------------- ---- -------
---- ---------- --------------- ---------
--------
----- ----- - ---------------------------------
------------------------------ --------------- -
---------------------
---
------------------------------- --------------- -
----------------------
---
---------在此示例中，我们向选定的img元素添加了load和error事件监听器。当图像成功加载时，将输出“图像已加载”到控制台。当图像加载失败时，将输出“图像加载失败”到控制台。
总结
在HTML中，只有使用双标签和单标签的元素才会引发DOM事件。当一个元素被关闭时，浏览器会检查它是否已注册任何相关的事件处理程序，并执行这些处理程序。如果你想在元素关闭时执行一些操作，可以使用事件监听器来捕获关闭事件
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/24075