zepto与focus/blur与事件委派

时间 2019-11-06

标签 zepto focus blur 事件委派繁體版

原文原文链接

---	focusin、focusout	focus、blur
冒泡支持	支持	不支持
浏览器支持	如今全部浏览器都支持，但之前firefox52如下不支持	全部浏览器都支持

注册focus事件

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>foucus事件委派</title>
</head>
<body>
<div>
    <form action="" style="padding: 50px;background-color: #00b4fd;width: 200px;height: 200px">
        <input type="text" value="helloworld">
    </form>
</div>
</body>
<script>
    //除了IE,其余浏览器的window对象中都没有onfocusin属性，可是其余浏览器addEventListener('focusin')有效
    var focusinSupported = 'onfocusin' in window,
        form = document.forms[0],
        focus = {focus: 'focusin', blur: 'focusout'}

    function callback(event) {
         console.log(event.target.tagName)//INPUT
        console.log(event.type,event.bubbles)//event.bubbles为false代表当前事件不会向上冒泡
        this.style.background = "red"
    }

    //当type为focus且浏览器支持onfocusin，则focus -> focusin
    function realEvent(type) {
        return focusinSupported && focus[type] || type
    }

    function eventCapture() {
        //不支持onfocusin则在捕获阶段触发事件
        return !focusinSupported ? true : false
    }

    form.addEventListener(realEvent('focus'), callback, eventCapture());
//    form.addEventListener(realEvent('focus'), callback, false);//focus不会向上冒泡，这样写不会触发回调
</script>
</html>

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

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事件this

var focusinSupported = 'onfocusin' in window

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

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

在捕获阶段获取目标对象一样能够实现事件委派，缘由能够参考如下引用firefox

即便"DOM2级事件"规范明确要求捕获阶段不会涉及事件目标(做者注释：即event.target)，但IE九、Safari、Chrome、Firefox 和 Opera9.5及更高版本都会在捕获阶段触发事件对象上的事件。结果，就是有两个机会在目标对象上面操做事件。
<<Javascript高级编程>>第三版 13.1.3 DOM事件流 p3483d

注册focusin事件

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

总结

如今全部浏览都已经支持foucsin，将来属于支持冒泡的focusinorm

参考

MDN focusin浏览器支持
<<Javascript高级编程>>第三版 13.1.3 DOM事件流