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

Question

I'm thinking more in terms of efficiency. If I choose to set the display of an element to none , will javascript continue to listen for events attached to it, or does it temporarily remove them until the display is reverted back?

Answer 1

It depends on the kind of events happening. Let's try using a click event:

 $(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> 

Test Cases

1. Click on the First Div. Second Div Changes, event is triggered.
2. Click on the Trigger Click. Second Div Changes, event is triggered.
3. Click on the Hide and Trigger Click. Second Div Changes, event is triggered.

Conclusion

Whether or not, the DOM element is visible in the screen or off-screen, all the events and behaviours are preserved. Only the CSS display is changed. Nothing else, nothing related to behaviour is affected.

This is similar to all the events, only thing is, you cannot calculate the dimensions or box model.

So this shows that the events are preserved when there's visibility: hidden or display: none .

Answer 2

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