CSS/Javascript - "display:none"暂时删除任何关联的事件监听器吗？

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>

测试用例

1. 点击First Div. 第二个Div更改,事件被触发.
2. 单击Trigger Click. 第二个Div更改,事件被触发.
3. 单击隐藏和触发单击. 第二个Div更改,事件被触发.

结论

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

这类似于所有事件,唯一的事情是,你无法计算尺寸或箱子模型.

所以这表明当事件visibility: hidden或事件时事件被保留display: none.

Answer 2

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