Question

我在效率方面的思考更多。如果我选择将元素的显示设置为none，javascript会继续侦听附加到它的事件，还是会暂时删除它们，直到显示还原为止？

Answer 1

这取决于发生的事件的类型。让我们尝试使用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>

测试用例

点击First Div。 Second Div Changes，触发事件。
点击触发点击。 Second Div Changes，触发事件。
点击隐藏和触发点击。 Second Div Changes，触发事件。

<强>结论

无论是否在屏幕或屏幕外显示DOM元素，都会保留所有事件和行为。仅更改CSS显示。没有别的，与行为无关的任何事情都会受到影响。

这类似于所有事件，唯一的事情是，无法计算尺寸或框模型。

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

Answer 2

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

CSS / Javascript - ＆＃34;显示：无＆＃34;暂时删除所有关联的事件监听器？

2 个答案: