<div class="parent">

    <input type="text" />

</div>

<div class="log"></div>

function log(str){

  $('.log').append($('<div/>').text(str));

}

$('.parent')

    .focusin(function(){log('div focusin');})

    .focusout(function(){log('div focusout');})

    .focus(function(){log('div focus');})

    .blur(function(){log('div blur');});

$('input')

    .focusin(function(){log('input focusin');})

    .focusout(function(){log('input focusout');})

    .focus(function(){log('input focus');})

    .blur(function(){log('input blur');});

<form name="form">

  <input type="text" name="name" value="Your name">

  <input type="text" name="surname" value="Your surname">

</form>

function addColor(){

  this.style.background="red";

}

var form = document.forms['form'];

if (form.addEventListener) { // 非 IE 浏览器

  form.addEventListener('focus', addColor, true);

}else{  // IE

  form.onfocusin = addColor

}

哪些元素是focusable的

在本文的第一小节提到了一个 focusable 元素的概念，我觉得有必要在这里解释一下什么是focusable 元素。
默认情况下，只有部分html元素能获得鼠标焦点如input，很大一部分html元素是不能获得鼠标焦点的如div，这些能够获得鼠标焦点的元素就是focusable 元素。要想一个元素获得焦点，可以通过三种方式：

• 鼠标点击

• tab 键

• 调用focus()方法

那么默认情况下，哪些元素是focusable 元素

1. window：当页面窗口从隐藏变成前置可见时，focus 事件就会触发

2. 表单元素(form controllers)：input/option/textarea/button

3. 链接元素(links)：a标签、area标签（必须要带 href 属性，包括 href 属性为空）

4. 设置了 tabindex 属性（tabindex 值非-1）的元素

5. 设置了contenteditable = "true"属性的元素

tabindex属性

默认情况下就能 focusable 的元素太少，如果想让一个 div 元素成为 focusable 的元素怎么做呢？很简单，设置 tabindex 属性即可！
tabindex 有2个作用：

1. 使一个元素变成 focusable 只要在元素上设置了 tabindex 属性，不管此属性的值设为多少，此元素都将变成focusable元素。

2. 定义多次按下 TAB 键时获得焦点的元素顺序tabindex 属性的值可以正数、0、负数，当多次按下TAB键，首先是tabindex为正数的元素获得焦点，顺序是：tabindex=1、tabindex=2、tabindex=3、tabindex=...，最后是tabindex=0的元素获得焦点。注意：tabindex为负数的元素不能通过 TAB 键获得焦点，只能通过鼠标点击或者调用focus()方法才能获得焦点。示例代码如下：

<ul>

<li tabindex="1" onfocus="showFocus(this)">One</li>

<li tabindex="0" onfocus="showFocus(this)">Zero</li>

<li tabindex="2" onfocus="showFocus(this)">Two</li>

<li tabindex="-1" onfocus="showFocus(this)">Minus one</li>

<li tabindex="-2" onfocus="showFocus(this)">Minus two</li>

</ul>