CSS/Javascript - 関連するイベントリスナーを一時的に削除しますか？

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. をクリックします。2番目のDiv変更、イベントがトリガされます。
2. トリガークリックをクリックします。2番目のDiv変更、イベントがトリガされます。
3. [非表示とトリガー]をクリックします。2番目のDiv変更、イベントがトリガされます。

結論、DOM要素が画面内または画面外表示されているか否か

は、すべてのイベント及び動作が保存されます。 CSS表示のみが変更されます。他に何も、行動に関係するものは影響を受けません。

これはすべてのイベントに似ていますが、唯一のものはできません寸法またはボックスモデルを計算します。

これは、visibility: hiddenまたはdisplay: noneの場合にイベントが保存されることを示しています。

Answer 2

いいえ、それはそれらを削除しませんが、要素とその子孫のすべてがレンダリングされていないため、ユーザーはそれらのいずれかでイベントをトリガするための方法はありませんので、ブラウザをテストすることはありません要素にイベントハンドラがあるかどうかを確認します。