在前端开发中，有时候需要实现点击页面其他地方触发某个事件的需求，比如点击除了一个弹窗以外的区域就关闭弹窗。这种需求可以通过添加监听器来实现。
监听 document 的 click 事件
最常见的实现方式是在 document 上添加 click 事件监听器，当用户点击页面上任意位置时都会触发该事件。
document.addEventListener('click', (event) => {
const target = event.target;
const popup = document.querySelector('.popup');
if (!popup.contains(target)) {
// 用户点击了弹窗以外的区域，执行关闭弹窗逻辑
popup.style.display = 'none';
}
});代码中，我们通过判断点击事件触发的元素 target 是否在弹窗 popup 内部来决定是否关闭弹窗。
然而，这种做法并不总是有效的。例如，如果页面上有多个层叠的元素，每个元素都有自己的事件监听器，这些监听器可能会阻止事件冒泡到 document 上，导致我们添加的监听器无法正常工作。
使用事件委托
为了避免上述问题，我们可以使用事件委托的方式来处理这个需求。具体来说，我们可以将监听器添加到包含要被触发事件的元素上，并通过判断事件的 target 元素来决定是否执行对应的逻辑。
例如，我们可以将弹窗的父元素 modal 作为事件委托的目标，并添加 click 事件监听器：
<div class="modal" onclick="handleClick(event)">
<div class="popup">
...
</div>
</div>function handleClick(event) {
const target = event.target;
const popup = document.querySelector('.popup');
if (!popup.contains(target)) {
// 用户点击了弹窗以外的区域，执行关闭弹窗逻辑
popup.style.display = 'none';
}
}代码中，我们通过在 .modal 元素上添加 onclick 属性来绑定点击事件委托函数 handleClick。当用户点击页面任意位置时，事件会冒泡到 .modal 元素上，被委托处理。
示例代码
下面是一个完整的示例代码，演示如何通过事件委托实现点击页面其他地方关闭弹窗的效果。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------ ---------- --- ---- -------------
-------
------ -
--------- ------
---- --
----- --
------ -----
------- -----
----------------- ------- -- -- -----
-------- -----
---------------- -------
------------ -------
-
------ -
----------------- ------
-------- -----
-
--------
-------
------
---- ------------- -----------------------------
---- --------------
--------------
------- -- - ----------
----------------------
------
------
--------
-------- ------------------ -
----- ------ - -------------
----- ----- - ---------------------------------
-- ------------------------- -
--------------------------------- - -------
-
-
---------
-------
-------在上面的示例中，我们在一个 .modal 元素上添加了事件委托监听器，并通过判断点击事件的 target 元素是否在 .popup 元素内部来决定是否关闭弹窗。
总结
通过本文的介绍，我们了解了如何使用事件监听器和事件委托来实现点击页面其他地方触发事件的需求。当需要
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/27154