CSS/Javascript-Do“;显示:无”;暂时删除任何关联的事件侦听器

CSS / Javascript - Does "display:none" remove any associated event listeners temporarily?

本文关键字：任何 删除 关联 事件 侦听器 Javascript-Do 显示 CSS      更新时间：2023-09-26

我更多地考虑效率。如果我选择将元素的显示设置为none，javascript会继续侦听附加到它的事件吗？还是会临时删除它们，直到恢复显示？

这取决于发生的事件类型。让我们尝试使用click事件：

$(function () {
  // Let's attach an event.
  $("#eventContainer").click(function () {
    $("#eventAffected").html("I changed.");
  });
  // This will hide the container surely when you click.
  $("#hide-container").click(function () {
    $("#eventContainer").hide().css("display", "none");
  });
  // This will trigger the event on the element.
  $("#trigger-event").click(function () {
    $("#eventContainer").trigger("click");
  });
});
* {font-family: 'Segoe UI'; margin: 5px;}
#eventContainer, #eventAffected {background-color: #ccf; text-align: center; padding: 5px;}
#eventAffected {background-color: #cfc;}
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<div id="eventContainer">Hello I am the Event Box</div>
<div id="eventAffected">Hello, I change when event triggered on the above.</div>
<button id="hide-container">Hide</button>
<button id="trigger-event">Trigger Click</button>

测试用例

  1. 单击第一分区。 第二分区更改，事件被触发
  2. 单击触发器单击 第二次潜水变化，事件被触发
  3. 单击隐藏并触发单击 第二次潜水变化，事件被触发

结论

无论DOM元素是否在屏幕上或屏幕外可见，所有事件和行为都会被保留。只有CSS显示被更改。除此之外，任何与行为相关的内容都不会受到影响。

这与所有事件类似，只是您不能计算维度或框模型。

因此，这表明当存在visibility: hidden或display: none时，事件会被保留。

不，它不会删除它们，但由于元素及其所有子代都没有呈现，用户无法在其中任何一个上触发事件，因此浏览器永远不会测试元素是否有任何事件处理程序。

相关文章：