Geek Answers Handbook

CSS / Javascript - "display: none" temporarily removes all related event listeners?

I think more about efficiency. If I decide to set the display of the element to none , will javascript continue to listen to the events attached to it or will it be temporarily deleted until the display goes back?

+7
javascript css event-listener
source share
2 answers

It depends on what events are taking place. Try using the click event:

 $(function () { // Let 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 tests

  • Click on the first div. . Second Div change, the event fires.
  • Click the Trigger Click button. Second Div change, the event fires.
  • Click the "Hide and Run Trigger" button. Second Div change, the event fires.

Conclusion

Regardless of whether the DOM element is displayed on-screen or off-screen, all events and behavior are preserved. Only the CSS screen is changed. Nothing else, nothing related to behavior.

This is similar to all events, only that you cannot calculate the size or model of the window.

So this shows that events are saved when there visibility: hidden or display: none .

+4
source share

No, it does not delete them, but since the element and all its descendants are not displayed, the user is not allowed to fire the event on any of them, so the browser will never check the element to see if it has any event handlers.

0
source share

More articles:


All Articles