如何在事件代理中正确使用 focus 和 blur 事件

Rainbow — Sun, 31 Jan 2010 04:20:20 +0000

让focus 和 blur 都支持冒泡事件的解决方案来自：

怿飞的《如何在事件代理中正确使用 focus 和 blur 事件》文章。

什么是事件代理（Event Delegation）？

如果不太了解的朋友，可详细阅读以下文章：

Event delegation in JavaScript

JavaScript的事件代理

如何使用JavaScript的事件代理

首先让我们一起来回顾一些常识：

通常支持事件冒泡（Event Bubbling）的事件类型为鼠标事件和键盘事件，例如：mouseover, mouseout, click, keydown, keypress。
接口事件则通常不支持事件冒泡（Event Bubbling），例如：load, change, submit, focus, blur。

很明显：focus 和 blur 都属于不支持冒泡的接口事件。既然都不支持冒泡，那又如何实现事件代理呢？

可以换个角度，逆向思维，尝试事件捕获（Event Capturing，除了IE，现在流行的标准浏览器均支持）。

测试后会发现，如果你捕获 focus 或 blur 事件，目标元素的祖先元素均执行事件函数。至于为什么？或许是实现的一个 BUG。

1 2	el.addEventListener('focus', focusHandler, true); el.addEventListener('blur', blurHandler, true);

那对于 IE ，我们如何实现呢？

非常幸运，IE 下支持 focusin 和 focusout 事件，非常类似于 focus 和 blur 事件，唯一不同的是，这两种事件支持事件冒泡（Event Bubbling）。

1 2	el.onfocusin = focusHandler; el.onfocusout = blurHandler;

很完美的解决方案：

if (document.addEventListener) {
    el.addEventListener('focus', focusHandler, true);
    el.addEventListener('blur', blurHandler, true);
} else {
    el.onfocusin = focusHandler;
    el.onfocusout = blurHandler;
}

知识扩展：

主流类库的事件代理：

Event Delegation with MooTools

Event delegation with jQuery

Event delegation with Prototype

Event delegation with YUI