本文分析JavaScript中利用事件委托处理focus和blur事件的技巧，重点解决Opera等浏览器触发异常的问题。通过捕获阶段将事件委派至父容器，分别演示了IE使用onfocusin/out与Firefox使用addEventListener的具体代码实现，并提供参数传递的中间函数写法。
JavaScript事件委托处理focus和blur的兼容方案
本文通过具体实例解析JavaScript中利用委托机制处理blur和focus事件的方法，旨在为开发者提供实用的参考方案。
在Opera 9.5b等早期版本中，focus和blur事件存在触发两次的不正常现象。为解决此兼容性问题，可以将这两个事件的处理函数绑定到事件流的捕获阶段，通过事件委托的方式统一处理。
例子1（列表类）：
代码示例如下：
<ol id="列表">
<li><a href="#">列表项1</a>
<ol>
<li><a href="#">列表项1.1</a></li>
<li><a href="#">列表项1.2</a></li>
<li><a href="#">列表项1.3</a></li>
</ol>
</li>
其他列表项
</ol>列表与表单场景示例
第二个示例涉及表单元素：
代码示例如下：
<form id="表单">
<input type="text" id="文本框" />
其他表单项
</form>在上述结构中，我们监听最外层的容器（如ol或form）。若直接对容器本身使用blur和focus事件，无法捕获内部子控件的状态变化。因此，需要采用特定的处理策略来响应内部元素的焦点变化。
IE与Firefox的具体处理实现
针对不同浏览器，处理方式有所区别：
对于IE浏览器，可利用focusin和focusout事件进行模拟：
代码实现如下：
$('列表').onmouseover = handleMouseOver;
$('列表').onmouseout = handleMouseOut;
$('列表').onfocusin = handleMouseOver;
$('列表').onfocusout = handleMouseOut;此外，还可以使用attachEvent方法以捕获阶段绑定事件：
代码实现如下：
$('列表').attachEvent('onfocusout',handleMouseOut,true);若需在回调中传递额外参数，可封装一个中间函数：
代码实现如下：
$('列表').attachEvent('onfocusout',function(event, myparams){handleMouseOut(event, myparams);},true);对于Firefox等标准浏览器，直接使用addEventListener在捕获阶段监听：
代码实现如下：
$('列表').addEventListener('focus',handleMouseOver,true);
$('列表').addEventListener('blur',handleMouseOut,true);希望上述关于JavaScript程序设计中的事件委托技巧能对大家有所帮助。