如何在事件代理中正确使用 focus 和 blur 事件
让focus 和 blur 都支持冒泡事件的解决方案来自:
怿飞的《如何在事件代理中正确使用 focus 和 blur 事件》文章。
什么是事件代理(Event Delegation)?
如果不太了解的朋友,可详细阅读以下文章:
首先让我们一起来回顾一些常识:
- 通常支持事件冒泡(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; |
很完美的解决方案:
1 2 3 4 5 6 7 | if (document.addEventListener) { el.addEventListener('focus', focusHandler, true); el.addEventListener('blur', blurHandler, true); } else { el.onfocusin = focusHandler; el.onfocusout = blurHandler; } |
知识扩展:
主流类库的事件代理:
文章评论 已经有 0 条评论!