你尚未登录,仅允许查看本站部分内容。请登录使用邀请码注册
二哲|风变科技

delegate实现原理(事件委托) 6个回复 专栏 @ Javascript

二哲|风变科技 发布于 2 年前

写这篇文章的初衷是,还有许多的开发者并不了解 事件委托(事件代理)

近来我也对 事件委托 进行了更深入的探索,取得了一些小成效,借中秋佳节之际分享给大家。

我们都知道,各种各样的操作都基于事件。

但,如果仅仅只是简单的使用 DOM0 级或者是 DOM2 级进行事件绑定。会消耗大量的资源。

既然是前端开发,那 事件委托 这项技能一定是必不可少的。我也十分提倡,更多的使用事件委托,少使用事件绑定。

不想说太多废话,我直接给出干货。(div.io的编辑器没做好啊!markdown的代码语法不支持!差评!)

delegate1

这里我虽然实现了事件委托,并且依赖于 querySelectorAll 支持了复杂选择器的实现。

但是在实际情况下,对于 blurchangefocus 等事件,有的是不支持事件冒泡的。而我在这没有做详细的判断。

接着是对比测试如下。

delegate2

delegate3

最后的结论为,delegate 函数,与jQuery唯一的不同就在于 e.currentTarget 对象的指向。

再此,我认为js的做法是对的。 e.currentTarget 指向的对象应该是为被委托对象,也就是body对象。

如果我委托你帮我拿外卖, 那事件发生即 e.currentTarget 就是在你身上。而我只是完成了吃外卖的过程。

然而如果不试用ES5的方法的话,我们是没法对 e.currentTarget 进行任何操作的,因为它仅仅只是只读的。

仔细研究了jQuery的做法,jQuery是自己构造了一个事件对象,如果我们的实现实在想与jQuery相同的话,我们可以使用ES5的办法,将它设置为可读可写。

或者与jQuery一样,自己构造了一个 事件对象

不过最终,我们实现了这个小小的事件委托!

接着我会去摸索jQuery的事件机制部分,也想自己实现一个小小的 Event对象 模块。如果实现了我还会在贴给大家的哈~

2 年前,二哲|风变科技 补充:
  • 二哲|风变科技

    第一次发帖,好紧张 (ノ∀`*)

    #1
  • MrZheng

    好像支持markdown的代码语法吧,只是不能高亮

    try {
        // code surrport
    } catch (e) {
        console.log(e);
    }
    
    #2
  • ShinePaul

    可以高亮啊 你们咋用的

    try {
        // code surrport
    } catch (e) {
        console.log(e);
    }
    
    #3
  • MrZheng

    @ShinePaul 我知道了,我是这样用的```javascript,但是在预览的时候好像没效果,我就以为不支持了,原来发布后可以..

    #4
  • luojunbin

    你这filter的实现有问题, 应该直接从字符串选择器中提取特征再判断target是否满足这些特征,
    而不是把满足条件的节点查出来再去比较;
    首先, 通过DOM查找来判断太消耗性能;
    其次, 每冒泡一次就把节点查一次, 仅在循环外缓存, 再一次消耗;

    如果按你的做法, 不考虑兼容的话可以用matches或者matchesSelector方法;
    最后, 你去看看JQ是怎么实现的吧

    #5
  • fish

    在M端,每次点击都会有个点击态(灰色背景闪一下)。
    如果用事件委托,会导致点击态出现在委托元素,而不是点击的元素上。
    而且用事件委托真能提高性能吗?现代游览器难道不会在底层做些优化,而不用开发者采用事件委托模式。

    #6
登录后回复,如无账号,请使用邀请码注册