CSS/Javascript - Czy "display: none" tymczasowo usuwa powiązane z nami detektory zdarzeń?

Question

Myślę, że bardziej pod względem wydajności. Jeśli zdecyduję się ustawić wyświetlanie elementu na none, czy javascript będzie kontynuować nasłuchiwanie dołączonych do niego zdarzeń, czy też tymczasowo usuwa je, dopóki ekran nie zostanie przywrócony?

Answer 1

To zależy od rodzaju zdarzeń. Spróbujmy używając zdarzenie 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>

testowe Przypadki

1. kliknij na pierwszy Div.Second Div Changes, zdarzenie jest wyzwalane.
2. Kliknij przycisk wyzwalacza.Second Div Changes, zdarzenie jest wyzwalane.
3. Kliknij przycisk Ukryj i uruchom wyzwalacz.Second Div Changes, zdarzenie jest wyzwalane.

Wnioski

, czy element DOM jest widoczna na ekranie lub off-screen, wszystkie zdarzenia i zachowania są zachowane. Zmieniany jest tylko wyświetlacz CSS. Nic innego, nic nie ma związku z zachowaniem.

Jest to podobne do wszystkich zdarzeń, jedyne co musisz zrobić, to nie może obliczyć wymiarów ani modelu pudełka.

To pokazuje, że zdarzenia są zachowywane, gdy istnieje visibility: hidden lub display: none.

Answer 2

Nie, nie usuwa ich, ale ponieważ element i jego potomkowie nie są renderowani, użytkownik nie może wywołać zdarzenia na żadnym z nich, więc przeglądarka nigdy nie przetestuje element, aby zobaczyć, czy ma jakiekolwiek procedury obsługi zdarzeń.