可想实现一个自己的简单jQuery库？(九)

archieyang 发布于2019-08-01 14:54 / 2407人阅读

摘要：事件机制在讲事件机制之前呢我们有一个很重要的东西要先讲那就是如何实现事件委托代理只有必须先明白了如何实现一个事件委托我们才能更好的去实现和在我看来和里最难实现的就是他的事件委托以上是我对整个委托的实现当然在这只做了非常简单的实现没有对很多

Lesson-8

事件机制

在讲事件机制之前呢,我们有一个很重要的东西要先讲,那就是如何实现事件委托(代理).

只有必须先明白了如何实现一个事件委托,我们才能更好的去实现on和off.在我看来,on和off里最难实现的就是他的事件委托.

function delegate(agent,type,selector,fn) {
    agent.addEventListener(type,function(e) {

        var target = e.target;
        var ctarget = e.currentTarget;
        var bubble = true;

        while(bubble && target != ctarget) {
            if(filiter(agent,selector,target)) {
                bubble = fn.call(target,e);
            }
            target = target.parentNode;
            return bubble;
        }
    },false);
    function filiter(agent,selector,target) {
        var nodes = agent.querySelectorAll(selector);
        for (var i = 0; i < nodes.length; i++) {
            if (nodes[i] == target) {
                return true;
            }
        }
    }
}

以上是我对整个委托的实现,当然在这只做了非常简单的实现,没有对很多别的情况进行判断,也没有多个参数是否捕捉.

我们先拆解下分析.

function filiter(agent,selector,target) {
    var nodes = agent.querySelectorAll(selector);
    for (var i = 0; i < nodes.length; i++) {
        if (nodes[i] == target) {
            return true;
        }
    }
}

先看这个方法,这其实就是一个元素过滤,作用就是为了过滤出我们委托的元素具体是谁.target就是我们具体的委托元素

agent.addEventListener(type,function(e) {

    var target = e.target;
    var ctarget = e.currentTarget;
    var bubble = true; //是否阻止冒泡

    while(bubble && target != ctarget) {
        if(filiter(agent,selector,target)) {
            bubble = fn.call(target,e);
        }
        target = target.parentNode;
        return bubble;
    }
},false);

然后是我们的主要部分.其实这里就很简单,while的条件判断两个,第一个是是否阻止冒泡,第二个判断是冒泡是否到顶.

接着我们进行filiter进行过滤,如果返回true,则是我们的委托元素,直接call即可.

如果不做过多的兼容处理,实现一个委托还是比较容易的.

PS:如果您还是不太明白,可以来这看更具体的解释.http://www.meckodo.com/?p=309

您的star是检验代码的唯一标准!:)

github地址: https://github.com/MeCKodo/forchange/tree/master/lesson-8
可想实现一个自己的简单jQuery库？(八)：http://segmentfault.com/a/1190000004025152

GPU云服务器云服务器 js实现的简单特效怎么搭建一个自己的视频网站如何搭建一个自己的服务器用c实现简单的shell

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

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

可想实现一个自己的简单jQuery库？(九)

摘要：事件机制在讲事件机制之前呢我们有一个很重要的东西要先讲那就是如何实现事件委托代理只有必须先明白了如何实现一个事件委托我们才能更好的去实现和在我看来和里最难实现的就是他的事件委托以上是我对整个委托的实现当然在这只做了非常简单的实现没有对很多 Lesson-8 事件机制在讲事件机制之前呢,我们有一个很重要的东西要先讲,那就是如何实现事件委托(代理). 只有必须先明白了如何实现一个事件委...

gnehc 2019-08-21 10:49 评论0 收藏0
可想实现一个自己的简单jQuery库？(三)

摘要：这个版本新增这个选择元素的方法还是比较常用的首先我们需要一个来过滤我们需要的上面那段比较简单就是普通的过滤下元素看下方法的源码就知道我传入数组对象的个对象然后取它的下一个同辈元素直接返回方法同理这段是取到第一个父元素由于返回的不是原生的对 Lesson-2 这个版本新增 next(),prev(),parent(),parents() 这4个选择元素的方法还是比较常用的首先我们需要...

xiaoxiaozi 2019-08-21 10:48 评论0 收藏0
可想实现一个自己的简单jQuery库？(八)

摘要：兼容性简直神器有木有所以我们写一个这样的方法吧实现操作然后只需要传对应参数就好了如此简单接着是方法在这我只做删除自身节点就没继续拓展了大家可以自行完善只能删除自身您给予的就是给代码赋予灵魂地址可想实现一个自己的简单库七 Lesson-7 新增 html,append,before,after,remove html: function (value) { if (value ...

X_AirDu 2019-08-21 10:48 评论0 收藏0