Must An Element Be Visible In Order To "load" Event Listener To Work?

In my document, there are two svg images: the preview and the result. The result image is computed based on the preview image; I switch between them by adding/removing class hidden

Solution 1:

Per our discussion, visibility:hidden is solving the event issue. Following is a example addressing your second problem, UI spacing.

functionregisterEvent() {
  document.getElementById("test").addEventListener("click", function() {
    console.log("Test");
  });
}

functionaddClass(str) {
  document.getElementById("test").className = str;
}

div {
  height: 100px;
  width: 100px;
  border: 2px solid gray;
  float: left;
  margin: 10px;
  padding: 10px;
}
.display {
  display: none
}
.hidden {
  visibility: hidden
}
.invisible {
  visibility: hidden;
  height: 0px;
  width: 0px;
  margin: 0px;
  padding: 0px;
}
.show {
  visibility: visible;
  display: block;
}

<divid="test">0</div><divid="test1">1</div><buttononclick="addClass('display')">Display</button><buttononclick="addClass('hidden')">Hidden</button><buttononclick="addClass('invisible')">Invisible</button><buttononclick="addClass('show')">Show</button>

Hope it helps!

Solution 2:

In fact, in Opera one cannot register an event on a node with display:none. Since working with visibility may easily mess up the formatting it may be a solution work with opacity like:

.hide {
  opacity: 0;
  z-index: -20;
}

.show {
  opacity: 1;
  z-index: -1;
}

Just toggle this two classes on the div's you want to show/hide. If the user needs to interact with something in the presented div you will have to add the z-index (as above). This also opens the possibility to add some nice transitions.