title: How to detect when a page exits fullscreen?
body: <p>I'm creating a 3D multiplayer game with Three.js, where players can join various existing games. Once "play" is clicked, the renderer is appended to the page and fullscreens. This works great, but the problem is that, when I exit the fullscreen, it still stays appended. I'd like to remove it, but I don't know when!</p>
  
  <p>So, basically, I'm looking for an event that says "this element exited fullscreen".</p>
  
  <p>This is how I append the renderer to the page:</p>
  
  <pre><code>container = document.getElementById('container');
  document.body.appendChild(container);
  
  var renderer = new THREE.WebGLRenderer({antialias: true});
  renderer.setSize( WIDTH, HEIGHT);
  container.appendChild( renderer.domElement );
  </code></pre>
  
  <p>This if how I fullscreen it:</p>
  
  <pre><code>THREEx.FullScreen.request(container); 
  renderer.setSize(screen.width, screen.height);
  </code></pre>
  
  <p>Also, is there a way to stop that annoying header from appearing whenever someone points his mouse to the top of the page? And, I guess I can just prevent escape from doing what it does (exiting fullscreen) in Firefox and Chrome with <code>preventDefault</code>?</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>The "fullscreenchange" event is indeed fired, but it has different names under different browsers. For example, on Chrome it's called "webkitfullscreenchange", and on Firefox it's "mozfullscreenchange".</p>