Focus focus hocus pocus

by Jools Chadwick

HTML

<div id="theparentdiv">
  <div id="thereddiv" tabindex="1">

  </div>

  <div id="thebluediv" tabindex="1">

  </div>
</div>
<div id="log">
</div>

CSS

#thereddiv,#thebluediv{
  height: 10px;
  width: 10px;
}
 #thereddiv{
   background-color: red;
 }
  #thebluediv{
   background-color: blue;
 }

JavaScript

var $theRedDiv = $('#thereddiv');
var $theBlueDiv = $('#thebluediv');
var $theParentDiv = $('#theparentdiv');
var $log = $('#log')

function log(message){
	$log.append('<div>'+message+'</div>');
}
function clearLog(){
	$log.empty();
}
function focus(color){
	log('Focusing '+color+' div...');
  $('#the'+color+'div').focus();
  log('...finished focusing '+color+' div.');
}

function blur(color){
	log('Blurring '+color+' div...');
  $('#the'+color+'div').blur();
  log('...finished bluring '+color+' div.');
}

$theParentDiv.on('focusin focusout',function(event){
	log(event.type+': target:'+event.target.id+' activeElement:'+document.activeElement.id);
});

$theRedDiv.on('focusout',function(event){
  focus('blue');
});

log('Click the red div');

$theRedDiv.on('click', function(){
	clearLog();
  log('Wait one sec')

  setTimeout(function(){
     blur('red')
  }, 1000);
});