zepto与focus/blur与事件委派

TNFE 发布于2019-08-22 14:04 / 1587人阅读

摘要：的处理事件注册流程大致如下为了有事件冒泡以完成事件委派，一般情况下用代替在浏览器不支持的情况下，只能用在捕获阶段触发回调，间接做到事件委派。结果，就是有两个机会在目标对象上面操作事件。

---	focusin、focusout	focus、blur
冒泡支持	支持	不支持
浏览器支持	现在所有浏览器都支持，但以前firefox52以下不支持	所有浏览器都支持

注册focus事件

以下是经简化后zepto处理注册focus事件的代码。运行代码，可以观察到当input获得焦点时触发了form注册focus时的回调函数。




    
    foucus事件委派

代码比较少，下面说一下重点。

zepto的处理focus事件注册流程大致如下

为了有事件冒泡以完成事件委派，一般情况下zepto用focusin、focusout代替focus、blur

在浏览器不支持focusin、focusout的情况下，只能用focus、blur在捕获阶段触发回调，间接做到事件委派。

IE9开始使用DOM事件模型，zepto统一用addEventListener注册事件，不支持IE9以下的版本，zepto中的on方法内部调用add方法，add方法经过多步处理，最后是这样注册一个事件的

form.addEventListener(realEvent("focus"), callback, eventCapture());

zepto是用以下方式来判断浏览器是否支持focusin事件

var focusinSupported = "onfocusin" in window

除了IE,其他浏览器的window对象中都没有onfocusin属性，其他浏览器中focusinSupported为false，但其他浏览器也支持focusin，用addEventListener("focusin")是有效的。下表是zepto注册focus事件的两个重要判断

---	IE9+	FF、Chrome
realEvent	focusinSupported:true， focus 转换为 focusin	focusinSupported:false，focus 不作转换
eventCapture	false，冒泡阶段触发回调	true，捕获阶段触发回调

在捕获阶段获取目标对象同样可以实现事件委派，原因可以参考以下引用

即使"DOM2级事件"规范明确要求捕获阶段不会涉及事件目标(作者注释：即event.target)，但IE9、Safari、Chrome、Firefox 和 Opera9.5及更高版本都会在捕获阶段触发事件对象上的事件。结果，就是有两个机会在目标对象上面操作事件。

<>第三版 13.1.3 DOM事件流 p348

注册focusin事件

除了IE9-，在zepto中，其他主流浏览器都可以注册focusin事件

总结

现在所有浏览都已经支持foucsin，未来属于支持冒泡的focusin

参考

MDN focusin浏览器支持

<>第三版 13.1.3 DOM事件流

云服务器 GPU云服务器事件委派委派事件事件与动画权限委派

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92830.html

读Zepto源码之Event模块

摘要：不支持事件冒泡带来的直接后果是不能进行事件委托，所以需要对和事件进行模拟。调用函数，分隔出参数的事件名和命名空间。这里判断是否为函数，即第一种传参方式，调用函数的方法，将上下文对象作为的第一个参数，如果存在，则与的参数合并。 Event 模块是 Zepto 必备的模块之一，由于对 Event Api 不太熟，Event 对象也比较复杂，所以乍一看 Event 模块的源码，有点懵，细看下...

vpants 2019-08-20 18:06 评论0 收藏0
向zepto.js学习如何手动(trigger)触发DOM事件

摘要：好啦我们已经解决了是啥的疑问了，现在回去开始一步步解读如何实现手动触发事件。我们主要看看这里面几乎含有如何手动触发一个事件的大部分步骤和内容。前言前端在最近几年实在火爆异常，vue、react、angular各路框架层出不穷，咱们要是不知道个双向数据绑定，不晓得啥是虚拟DOM，也许就被鄙视了。火热的背后往往也是无尽的浮躁，学习这些先进流行的类库或者框架可以让我们走的更快，但是静下心...

spacewander 2019-08-20 17:04 评论0 收藏0
向zepto.js学习如何手动(trigger)触发DOM事件

摘要：好啦我们已经解决了是啥的疑问了，现在回去开始一步步解读如何实现手动触发事件。我们主要看看这里面几乎含有如何手动触发一个事件的大部分步骤和内容。前言前端在最近几年实在火爆异常，vue、react、angular各路框架层出不穷，咱们要是不知道个双向数据绑定，不晓得啥是虚拟DOM，也许就被鄙视了。火热的背后往往也是无尽的浮躁，学习这些先进流行的类库或者框架可以让我们走的更快，但是静下心...

fuyi501 2019-08-29 12:44 评论0 收藏0
向zepto.js学习如何手动(trigger)触发DOM事件

摘要：好啦我们已经解决了是啥的疑问了，现在回去开始一步步解读如何实现手动触发事件。我们主要看看这里面几乎含有如何手动触发一个事件的大部分步骤和内容。前言前端在最近几年实在火爆异常，vue、react、angular各路框架层出不穷，咱们要是不知道个双向数据绑定，不晓得啥是虚拟DOM，也许就被鄙视了。火热的背后往往也是无尽的浮躁，学习这些先进流行的类库或者框架可以让我们走的更快，但是静下心...

Julylovin 2019-08-01 16:57 评论0 收藏0
窥探zepto的事件模块

摘要：写在前面通过本文，您可以了解的事件模块，之后到底发生了什么样的事情，如何实现的事件委托，如何实现的自定义事件等问题。个人理解这么做目的在于便于移除事件，这样就可以使用匿名函数，而且仍可以将该匿名函数移除。写在前面通过本文，您可以了解zepto的事件模块，$(selector).on之后到底发生了什么样的事情，如何实现的事件委托【$(selector).delegate】，如何实现的...

frolc 2019-08-21 11:18 评论0 收藏0