効率の面でもっと考えています。要素の表示をnone
に設定することを選択した場合、javascriptはそれに添付されたイベントをリッスンし続けますか、それとも表示が元に戻るまで一時的に削除しますか?
発生するイベントの種類によって異なります。 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>
テストケース
結論
DOM要素が画面に表示されているかどうかに関係なく、すべてのイベントと動作が保持されます。 CSS表示のみが変更されます。他には何も、行動に関連するものは何も影響を受けません。
これはすべてのイベントに似ていますが、唯一のことは、寸法またはボックスモデルを計算することですできません。
つまり、これは、visibility: hidden
またはdisplay: none
がある場合にイベントが保持されることを示しています。
いいえ、削除されませんが、要素とそのすべての子孫がレンダリングされないため、ユーザーがそれらのいずれかでイベントをトリガーする方法がないため、ブラウザーは要素をテストしてかどうかを確認しません。イベントハンドラーがあります。