web-dev-qa-db-ja.com

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

効率の面でもっと考えています。要素の表示をnoneに設定することを選択した場合、javascriptはそれに添付されたイベントをリッスンし続けますか、それとも表示が元に戻るまで一時的に削除しますか？

javascriptcssevent-listener
12
sookie

発生するイベントの種類によって異なります。 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. 最初のDivをクリックします。2番目のDivが変更され、イベントがトリガーされます。
  2. トリガークリックをクリックします。2番目のDivの変更、イベントがトリガーされます。
  3. [非表示]をクリックしてクリックをトリガーします。2番目のDivの変更、イベントがトリガーされます。

結論

DOM要素が画面に表示されているかどうかに関係なく、すべてのイベントと動作が保持されます。 CSS表示のみが変更されます。他には何も、行動に関連するものは何も影響を受けません。

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

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

11
Praveen Kumar Purushothaman

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

2
Quentin