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!

So, basically, I'm looking for an event that says this element exited fullscreen.

This is how I append the renderer to the page:

container = document.getElementById('container');

document.body.appendChild(container);



var renderer = new THREE.WebGLRenderer({antialias: true});

renderer.setSize( WIDTH, HEIGHT);

container.appendChild( renderer.domElement );

This if how I fullscreen it:

THREEx.FullScreen.request(container); 

renderer.setSize(screen.width, screen.height);

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 preventDefault?

EDIT:

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.